@agent-native/core 0.80.6 → 0.80.8

package/corpus/README.md

@@ -28,4 +28,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 ## Generated Counts
 
 - core files: 2041
-- template files: 4587
+- template files: 4598

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @agent-native/core
 
+## 0.80.8
+
+### Patch Changes
+
+- 24deb20: Reduce noisy browser Sentry captures by filtering public-site source-less errors that only report their page URL as a Sentry tag, delaying reconnect aborts until active runs are truly stuck on the server clock, and recovering assistant-ui duplicate message-id append races before they escape.
+
+## 0.80.7
+
+### Patch Changes
+
+- 72ef787: Add `onReady` and `onUnavailable` callbacks to `EmbeddedExtension`. `onReady` fires once when the embedded iframe first signals content readiness (its first height report, or iframe load as a fallback) — hosts that gate on content paint, such as dashboard report screenshots, can use it to avoid capturing a blank extension. `onUnavailable` fires when the extension can't be loaded for the current viewer (e.g. 403/404 because it isn't shared with them or no longer exists), so hosts can render an explanatory fallback instead of a silently blank panel.
+
 ## 0.80.6
 
 ### Patch Changes

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.80.6",
+  "version": "0.80.8",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/corpus/core/src/client/AssistantChat.tsx

@@ -228,6 +228,7 @@ function createUserMessageRunConfig(
 
 const PENDING_SELECTION_KEY = "pending-selection-context";
 const ACTIVE_RUN_CLEAR_TIMEOUT_MS = 5_000;
+const ACTIVE_RUN_STUCK_THRESHOLD_MS = 90_000;
 const ACTIVE_RUN_POLL_INTERVAL_MS = 150;
 const SUBMIT_ENGINE_STATUS_TIMEOUT_MS = 1000;
 
@@ -237,15 +238,27 @@ type ActiveRunLookup = {
   threadId?: string;
   status?: string;
   heartbeatAt?: number | null;
+  lastProgressAt?: number | null;
+  serverNow?: number;
 };
 
 function activeRunLooksStale(runInfo: ActiveRunLookup): boolean {
-  const heartbeatAt =
-    typeof runInfo.heartbeatAt === "number" ? runInfo.heartbeatAt : null;
+  const lastProgressAt =
+    typeof runInfo.lastProgressAt === "number" ? runInfo.lastProgressAt : null;
+  const nowMs =
+    typeof runInfo.serverNow === "number" ? runInfo.serverNow : Date.now();
   return (
     runInfo.status === "running" &&
-    heartbeatAt != null &&
-    Date.now() - heartbeatAt > 5000
+    lastProgressAt != null &&
+    nowMs - lastProgressAt > ACTIVE_RUN_STUCK_THRESHOLD_MS
+  );
+}
+
+function isAssistantUiDuplicateMessageIdError(error: unknown): boolean {
+  const message = error instanceof Error ? error.message : String(error ?? "");
+  return (
+    message.includes("MessageRepository") &&
+    message.includes("same id already exists")
   );
 }
 
@@ -295,14 +308,13 @@ async function waitForThreadRunToClear(apiUrl: string, threadId?: string) {
         `${apiUrl}/runs/active?threadId=${encodeURIComponent(threadId)}`,
       );
       if (res.ok) {
-        const info = await res.json();
-        const heartbeatAt =
-          typeof info?.heartbeatAt === "number" ? info.heartbeatAt : null;
-        const stale =
-          info?.status === "running" &&
-          heartbeatAt != null &&
-          Date.now() - heartbeatAt > 5000;
-        if (!info?.active || info?.status !== "running" || stale) return;
+        const info = (await res.json()) as ActiveRunLookup;
+        if (
+          !info?.active ||
+          info?.status !== "running" ||
+          activeRunLooksStale(info)
+        )
+          return;
       }
     } catch {
       // Transient poll failure — try again until the short grace period ends.
@@ -1467,9 +1479,40 @@ const AssistantChatInner = forwardRef<
     }
   }, [apiUrl, importThreadData, loadHistoryRepository, threadId]);
 
+  const exportCleanThreadRepo = useCallback(
+    () =>
+      ensureMessageMetadata(normalizeThreadRepository(threadRuntime.export())),
+    [threadRuntime],
+  );
+
+  const appendThreadMessage = useCallback(
+    (message: Parameters<typeof threadRuntime.append>[0]) => {
+      try {
+        threadRuntime.append(message);
+        return;
+      } catch (error) {
+        if (!isAssistantUiDuplicateMessageIdError(error)) throw error;
+      }
+
+      try {
+        threadRuntime.import(exportCleanThreadRepo());
+      } catch {
+        // Best effort cleanup; retry below handles the still-duplicated case.
+      }
+
+      try {
+        threadRuntime.append(message);
+      } catch (retryError) {
+        if (isAssistantUiDuplicateMessageIdError(retryError)) return;
+        throw retryError;
+      }
+    },
+    [exportCleanThreadRepo, threadRuntime],
+  );
+
   const cacheCurrentThreadSnapshot = useCallback(() => {
     if (!threadId || messages.length === 0) return;
-    const repo = threadRuntime.export();
+    const repo = exportCleanThreadRepo();
     const threadData = JSON.stringify(stripBase64FromRepo(repo));
     const { title, preview } = extractThreadMeta(repo);
     writeCachedThreadSnapshot(apiUrl, threadId, {
@@ -1478,7 +1521,7 @@ const AssistantChatInner = forwardRef<
       preview,
       messageCount: messages.length,
     });
-  }, [apiUrl, messages.length, threadId, threadRuntime]);
+  }, [apiUrl, exportCleanThreadRepo, messages.length, threadId]);
 
   useBrowserLayoutEffect(() => {
     if (hasImportedInitialCachedSnapshotRef.current) return;
@@ -1975,7 +2018,7 @@ const AssistantChatInner = forwardRef<
     const timeSinceLastSave = now - lastSaveTimeRef.current;
     if (timeSinceLastSave < 5000) return;
 
-    const repo = threadRuntime.export();
+    const repo = exportCleanThreadRepo();
     const { title, preview } = extractThreadMeta(repo);
     const threadData = JSON.stringify(stripBase64FromRepo(repo));
     const snapshot = {
@@ -1989,7 +2032,7 @@ const AssistantChatInner = forwardRef<
     savedTitleRef.current = title;
     writeCachedThreadSnapshot(apiUrl, threadId, snapshot);
     onSaveThreadRef.current(threadId, snapshot);
-  }, [apiUrl, messages, isRunning, threadId, threadRuntime]);
+  }, [apiUrl, exportCleanThreadRepo, messages, isRunning, threadId]);
 
   // Persist full thread data after each completed response
   useEffect(() => {
@@ -1997,7 +2040,7 @@ const AssistantChatInner = forwardRef<
     if (isRunning) return;
     if (messages.length === 0) return;
 
-    const repo = threadRuntime.export();
+    const repo = exportCleanThreadRepo();
 
     if (threadId && onSaveThreadRef.current) {
       // Save to server via the hook callback
@@ -2019,7 +2062,7 @@ const AssistantChatInner = forwardRef<
         sessionStorage.setItem(storageKey, JSON.stringify(repo));
       } catch {}
     }
-  }, [apiUrl, messages, isRunning, threadId, tabId, threadRuntime]);
+  }, [apiUrl, exportCleanThreadRepo, messages, isRunning, threadId, tabId]);
 
   useEffect(() => {
     onMessageCountChange?.(messages.length);
@@ -2280,7 +2323,7 @@ const AssistantChatInner = forwardRef<
             next.attachments && next.attachments.length > 0
               ? next.attachments
               : (imageAttachments ?? []);
-          threadRuntime.append({
+          appendThreadMessage({
             role: "user",
             content: [{ type: "text", text: next.text }],
             ...(messageAttachments.length > 0
@@ -2334,12 +2377,12 @@ const AssistantChatInner = forwardRef<
     };
   }, [
     apiUrl,
+    appendThreadMessage,
     applyLocalQueuedMessages,
     isRestoring,
     isRunning,
     queuedMessages,
     threadId,
-    threadRuntime,
   ]);
 
   // Clear frozen reconnect content + forceStopped only on the false→true
@@ -2683,7 +2726,7 @@ const AssistantChatInner = forwardRef<
           },
         ]);
       } else {
-        threadRuntime.append({
+        appendThreadMessage({
           role: "user",
           content: [{ type: "text", text: submittedText }],
           ...(messageAttachments.length > 0
@@ -2708,7 +2751,7 @@ const AssistantChatInner = forwardRef<
       execMode,
       isRunning,
       materializeFrozenReconnectContent,
-      threadRuntime,
+      appendThreadMessage,
       updateComposerContextItems,
     ],
   );
@@ -2774,7 +2817,7 @@ const AssistantChatInner = forwardRef<
       },
       exportThreadSnapshot() {
         if (messages.length === 0) return null;
-        const repo = threadRuntime.export();
+        const repo = exportCleanThreadRepo();
         const { title, preview } = extractThreadMeta(repo);
         return {
           threadData: JSON.stringify(repo),
@@ -2786,10 +2829,10 @@ const AssistantChatInner = forwardRef<
     }),
     [
       addToQueue,
+      exportCleanThreadRepo,
       messages.length,
       stageComposerContextItem,
       thread.isRunning,
-      threadRuntime,
     ],
   );
 
@@ -2986,7 +3029,7 @@ const AssistantChatInner = forwardRef<
   const approvalCtx = useMemo<ApprovalContextValue>(
     () => ({
       onApprove: (approvalKey: string) => {
-        threadRuntime.append({
+        appendThreadMessage({
           role: "user",
           content: [
             {
@@ -3008,7 +3051,7 @@ const AssistantChatInner = forwardRef<
         } as Parameters<typeof threadRuntime.append>[0]);
       },
     }),
-    [threadRuntime, execMode],
+    [appendThreadMessage, execMode],
   );
 
   return (
@@ -3201,7 +3244,7 @@ const AssistantChatInner = forwardRef<
                                   setMissingKeyBouncePulse((p) => p + 1);
                                   return;
                                 }
-                                threadRuntime.append({
+                                appendThreadMessage({
                                   role: "user",
                                   content: [{ type: "text", text: suggestion }],
                                 });

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

@@ -610,7 +610,9 @@ function isAgentNativeDocsUrl(url: string): boolean {
 
 function shouldDropBrowserSentryNoise(event: Sentry.Event): boolean {
   const exceptionValues = event.exception?.values ?? [];
-  const requestUrl = event.request?.url?.toLowerCase() ?? "";
+  const taggedUrl =
+    typeof event.tags?.url === "string" ? event.tags.url : undefined;
+  const requestUrl = (event.request?.url ?? taggedUrl ?? "").toLowerCase();
   const isDocsPage = isAgentNativeDocsUrl(requestUrl);
   // AgentAutoContinueSignal is a control-flow sentinel thrown to bubble
   // out of the SSE stream parser when the agent run needs to be

package/corpus/core/src/client/extensions/EmbeddedExtension.tsx

@@ -29,6 +29,7 @@ import {
 } from "./delete-extension.js";
 import {
   extensionLoadError,
+  extensionLoadErrorStatus,
   shouldRetryExtensionLoad,
 } from "./extension-load-error.js";
 import {
@@ -74,6 +75,15 @@ export interface EmbeddedExtensionProps {
   className?: string;
   /** Initial iframe height before content reports a real height. */
   initialHeight?: number;
+  /** Fires once when the embedded iframe first signals content readiness — its
+   * first height report, or iframe load as a fallback. Hosts that gate on
+   * content paint (e.g. dashboard report screenshots) use this. */
+  onReady?: () => void;
+  /** Fires when the extension can't be loaded for this viewer (e.g. 403/404 —
+   * the extension isn't shared with them or no longer exists). Hosts can use
+   * this to render an explanatory fallback instead of a blank panel. By default
+   * the component renders nothing on failure (slot-style silent skip). */
+  onUnavailable?: (status?: number) => void;
 }
 
 /**
@@ -87,8 +97,20 @@ export function EmbeddedExtension({
   context,
   className,
   initialHeight = 80,
+  onReady,
+  onUnavailable,
 }: EmbeddedExtensionProps) {
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  // Latch the readiness signal so onReady fires at most once per iframe
+  // instance. Reset when the iframe is recreated (extensionId/updatedAt change).
+  const onReadyRef = useRef(onReady);
+  onReadyRef.current = onReady;
+  const readyFiredRef = useRef(false);
+  const fireReady = () => {
+    if (readyFiredRef.current) return;
+    readyFiredRef.current = true;
+    onReadyRef.current?.();
+  };
   const [height, setHeight] = useState<number>(initialHeight);
   const [isDark, setIsDark] = useState(false);
   // (audit H4) Mirror ExtensionViewer's role-aware gating; deny-by-default until
@@ -120,6 +142,8 @@ export function EmbeddedExtension({
     data: extension,
     isFetching,
     isLoading,
+    isError,
+    error,
   } = useQuery<Extension>({
     queryKey: ["extension", extensionId],
     queryFn: async () => {
@@ -141,6 +165,21 @@ export function EmbeddedExtension({
     retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 4000),
   });
 
+  // Notify the host once when the extension can't be loaded for this viewer so
+  // it can show a fallback instead of a blank panel.
+  const onUnavailableRef = useRef(onUnavailable);
+  onUnavailableRef.current = onUnavailable;
+  const unavailableFiredRef = useRef(false);
+  useEffect(() => {
+    unavailableFiredRef.current = false;
+  }, [extensionId]);
+  useEffect(() => {
+    if (isError && !isFetching && !unavailableFiredRef.current) {
+      unavailableFiredRef.current = true;
+      onUnavailableRef.current?.(extensionLoadErrorStatus(error));
+    }
+  }, [isError, isFetching, error]);
+
   // Initial dark state is baked into the URL on first load only; subsequent
   // theme toggles update the iframe's <html class="dark"> via postMessage so
   // the user's interaction state inside the extension survives the toggle.
@@ -158,6 +197,7 @@ export function EmbeddedExtension({
   useEffect(() => {
     bridgeContextRef.current = { role: "viewer", isAuthor: false };
     bindingLatchedRef.current = false;
+    readyFiredRef.current = false;
   }, [extensionId, extension?.updatedAt]);
 
   useEffect(() => {
@@ -215,6 +255,8 @@ export function EmbeddedExtension({
         const h = Number(message.height);
         if (Number.isFinite(h) && h > 0) {
           setHeight(Math.ceil(h));
+          // First laid-out height means the content has painted.
+          fireReady();
         }
         return;
       }
@@ -330,6 +372,9 @@ export function EmbeddedExtension({
             { type: "agent-native-slot-context", context: context ?? {} },
             "*",
           );
+          // Fallback readiness signal in case the extension never reports a
+          // height (e.g. fixed-height content that skips auto-resize).
+          fireReady();
         }}
       />
       <EmbeddedToolMenu

package/corpus/templates/analytics/.agents/skills/dashboard-management/SKILL.md

@@ -56,7 +56,7 @@ When the user asks for a dashboard:
 2. If a metric definition, date range, or grain is ambiguous and the choice would change the panel's numbers, use the `ask-question` clarifying tool once before building. Skip it when the dictionary or the user already settled it.
 3. If a metric is not documented, do not guess column names. Ask for the table/columns or introspect the provider schema, then propose a dictionary entry with `save-data-dictionary-entry`.
 4. Build a complete `SqlDashboardConfig` with `name` and `panels`. Optionally set top-level `columns` (1–6, default 2) to control how many grid columns the panels before any section use.
-5. Every panel needs `id`, `title`, `source`, `chartType`, `width`, and `sql`. `width` is the number of grid columns the panel spans (1..6, clamped to the active section's column count). Section panels skip `source` and `sql` and may set their own `columns` (1–6) to override the dashboard default for the panels following the section.
+5. Every panel needs `id`, `title`, `source`, `chartType`, `width`, and `sql`. `width` is the number of grid columns the panel spans (1..6, clamped to the active section's column count). Section panels skip `source` and `sql` and may set their own `columns` (1–6) to override the dashboard default for the panels following the section. Extension panels (`chartType: "extension"`) also skip `source` and `sql`; instead they require `config.extensionId` (see "Embedding An Extension As A Panel").
 6. Persist with `update-dashboard`, not raw SQL or settings writes.
 7. Navigate to it with `pnpm action navigate --view=adhoc --dashboardId=<id>`.
 
@@ -85,6 +85,37 @@ production mode, call `create-extension` automatically and then tell the user
 that the request needed a bespoke surface, so you built it as an extension
 rather than forcing it into a native dashboard config.
 
+## Embedding An Extension As A Panel
+
+Use `chartType: "extension"` to embed an existing extension as a dashboard
+panel. This is different from the section above: there you replace the whole
+dashboard with an extension; here you drop a single extension widget into one
+panel slot alongside normal SQL charts. The panel renders the extension's
+sandboxed iframe instead of running a query, so it skips `source` and `sql` and
+instead requires `config.extensionId` (the id of an extension that already
+exists — create it first with `create-extension`). Validation rejects an
+extension panel without a non-empty `config.extensionId`.
+
+```jsonc
+{
+  "id": "pipeline-widget",
+  "title": "Pipeline Widget",
+  "chartType": "extension",
+  "width": 3,
+  "config": { "extensionId": "<existing-extension-id>" },
+}
+```
+
+Notes:
+
+- The panel renders full-bleed (no card chrome/title) and does not receive the
+  dashboard's filters/variables/date range — it's a standalone widget for now.
+- Access is scoped per viewer: embedding does NOT grant access to the extension
+  (same model as ExtensionSlots). If you share a dashboard more broadly than the
+  embedded extension, viewers without access to that extension see an
+  "extension unavailable" message instead of the content. Share the extension to
+  the same audience as the dashboard so all viewers can see it.
+
 ## Config Shape
 
 ```jsonc
@@ -207,7 +238,7 @@ type PanelPatch = {
   title?: string;
   sql?: string;
   source?: "bigquery" | "ga4" | "amplitude" | "first-party" | "demo" | "prometheus";
-  chartType?: "line" | "area" | "bar" | "metric" | "table" | "pie" | "section" | "heatmap" | "callout";
+  chartType?: "line" | "area" | "bar" | "metric" | "table" | "pie" | "section" | "heatmap" | "callout" | "extension";
   width?: number;
   columns?: number;
   tab?: string;
@@ -219,8 +250,9 @@ type PanelInput = PanelPatch & {
   id: string;
   title: string;
   chartType: NonNullable<PanelPatch["chartType"]>;
-  source?: PanelPatch["source"]; // required for non-section panels
-  sql?: string; // required for non-section panels
+  source?: PanelPatch["source"]; // required for non-section / non-extension panels
+  sql?: string; // required for non-section / non-extension panels
+  // For chartType "extension": config.extensionId is required (the extension to embed).
 };
 
 type PanelFilter = {
@@ -450,6 +482,12 @@ pnpm action set-resource-visibility --resourceType dashboard --resourceId weekly
 
 Writes require editor access; deletes require admin access. Owners always satisfy access checks.
 
+If a dashboard embeds an extension panel (`chartType: "extension"`), sharing the
+dashboard does not share the extension. Share the referenced extension to the
+same audience (`share-resource --resourceType extension ...`) so all dashboard
+viewers can see the embedded content; otherwise they get an "extension
+unavailable" placeholder.
+
 ## Important Rules
 
 - Never fabricate data or create a dashboard from guessed schema. A panel's SQL must hit a real source; do not present figures you did not actually query.

package/corpus/templates/analytics/actions/dashboard-mutation-api.ts

@@ -36,7 +36,7 @@ type PanelPatch = {
   title?: string;
   sql?: string;
   source?: "bigquery" | "ga4" | "amplitude" | "first-party" | "demo" | "prometheus";
-  chartType?: "line" | "area" | "bar" | "metric" | "table" | "pie" | "section" | "heatmap" | "callout";
+  chartType?: "line" | "area" | "bar" | "metric" | "table" | "pie" | "section" | "heatmap" | "callout" | "extension";
   width?: number;
   columns?: number;
   tab?: string;
@@ -115,6 +115,7 @@ export const DASHBOARD_MUTATION_EXAMPLES = [
   'dashboard.insertPanel({"id":"new-kpi","title":"New KPI","source":"first-party","chartType":"metric","width":1,"sql":"SELECT COUNT(*) AS value FROM analytics_events"}).atTop();',
   'dashboard.insertPanel({"id":"new-chart","title":"New Chart","source":"first-party","chartType":"line","width":1,"sql":"SELECT date, COUNT(*) AS value FROM analytics_events GROUP BY date ORDER BY date"}).nextTo("retention-over-time");',
   'dashboard.insertPanel({"id":"row-chart","title":"Row Chart","source":"first-party","chartType":"bar","width":1,"sql":"SELECT name, COUNT(*) AS value FROM analytics_events GROUP BY name"}).atRow(2);',
+  'dashboard.insertPanel({"id":"pipeline-widget","title":"Pipeline Widget","chartType":"extension","width":3,"config":{"extensionId":"<existing-extension-id>"}}).atBottom();',
 ] as const;
 
 export type DashboardMutationOperation =

package/corpus/templates/analytics/actions/update-dashboard.ts

@@ -334,12 +334,15 @@ export function validateDashboardConfig(
     if (!p || typeof p !== "object") {
       return `panel[${i}] must be an object`;
     }
-    // Section panels are pure layout dividers, so source and sql are optional.
-    // Width stays required for backward-compatible dashboard payloads.
+    // Section panels are pure layout dividers and extension panels render their
+    // own iframe, so both make source and sql optional. Width stays required for
+    // backward-compatible dashboard payloads.
     const isSection = p.chartType === "section";
-    const required = isSection
-      ? (["id", "title", "chartType", "width"] as const)
-      : (["id", "title", "sql", "source", "chartType", "width"] as const);
+    const isExtension = p.chartType === "extension";
+    const required =
+      isSection || isExtension
+        ? (["id", "title", "chartType", "width"] as const)
+        : (["id", "title", "sql", "source", "chartType", "width"] as const);
     for (const field of required) {
       const v = p[field];
       if (field === "width") {
@@ -352,9 +355,19 @@ export function validateDashboardConfig(
         return `panel[${i}].${field} is required (non-empty string)`;
       }
     }
-    if (!isSection && !validSources.has(p.source as string)) {
+    if (!isSection && !isExtension && !validSources.has(p.source as string)) {
       return `panel[${i}].source must be 'bigquery', 'ga4', 'amplitude', 'first-party', 'demo', or 'prometheus' (got '${p.source}'). source selects the backend — put the PromQL/SQL/table name in sql, not here.`;
     }
+    if (isExtension) {
+      const cfg = p.config as Record<string, unknown> | undefined;
+      const extensionId =
+        cfg && typeof cfg.extensionId === "string"
+          ? cfg.extensionId.trim()
+          : "";
+      if (!extensionId) {
+        return `panel[${i}].config.extensionId is required for extension panels (the id of the extension to render inline)`;
+      }
+    }
     if (
       isSection &&
       p.columns !== undefined &&
@@ -382,9 +395,10 @@ export async function validatePanelSql(
   const vars = buildDryRunVars(config);
   for (let i = 0; i < panels.length; i++) {
     const p = panels[i] as Record<string, unknown>;
-    // Sections are layout-only — no SQL to dry-run. heatmap, callout, and other
-    // query panels still validate normally below.
-    if (p.chartType === "section") continue;
+    // Sections are layout-only and extensions render their own iframe — neither
+    // has SQL to dry-run. heatmap, callout, and other query panels still
+    // validate normally below.
+    if (p.chartType === "section" || p.chartType === "extension") continue;
     if (p.source === "amplitude") {
       const raw = typeof p.sql === "string" ? p.sql : "";
       if (raw.trim()) {

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

@@ -1,4 +1,5 @@
 import { useT } from "@agent-native/core/client";
+import { EmbeddedExtension } from "@agent-native/core/client/extensions";
 import {
   IconArrowsSort,
   IconSortAscending,
@@ -868,7 +869,10 @@ export function SqlChart({
   const t = useT();
   // Hooks must be called unconditionally before any early return.
   const isSection = panel.chartType === "section";
-  const shouldQuery = !isSection && loadData;
+  const isExtension = panel.chartType === "extension";
+  // Sections are pure layout and extensions render their own iframe — neither
+  // runs the SQL pipeline.
+  const shouldQuery = !isSection && !isExtension && loadData;
   const sql = serializePanelSql(resolvedSql ?? panel.sql);
   const {
     data: result,
@@ -918,6 +922,24 @@ export function SqlChart({
       </div>
     );
   }
+
+  // Extension panels render a sandboxed extension iframe instead of querying a
+  // data source. The extension id lives in config.extensionId.
+  if (isExtension) {
+    const extensionId = panel.config?.extensionId;
+    if (!extensionId) {
+      return (
+        <div className="flex flex-1 items-center justify-center px-4 py-8 min-h-[120px]">
+          <p className="text-sm text-muted-foreground text-center">
+            {t("sqlDashboard.extensionMissingId")}
+          </p>
+        </div>
+      );
+    }
+    return (
+      <DashboardExtensionPanel extensionId={extensionId} panelId={panel.id} />
+    );
+  }
   const colors = panel.config?.colors || DEFAULT_COLORS;
   const yFormatter = panel.config?.yFormatter;
 
@@ -1041,6 +1063,55 @@ export function SqlChart({
   );
 }
 
+function DashboardExtensionPanel({
+  extensionId,
+  panelId,
+}: {
+  extensionId: string;
+  panelId: string;
+}) {
+  const t = useT();
+  // Hold the report-readiness marker until the extension iframe paints so
+  // dashboard report screenshots don't capture a blank extension panel.
+  const [ready, setReady] = useState(false);
+  const [unavailable, setUnavailable] = useState(false);
+
+  // Embedding never grants access to the extension itself (same model as
+  // ExtensionSlots). A viewer with dashboard-only access who can't see the
+  // referenced extension gets a clear message instead of a blank panel.
+  if (unavailable) {
+    return (
+      <div className="flex flex-1 items-center justify-center px-4 py-8 min-h-[120px]">
+        <p className="text-sm text-muted-foreground text-center">
+          {t("sqlDashboard.extensionUnavailable")}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="w-full"
+      data-dashboard-report-loading={ready ? undefined : "true"}
+    >
+      <EmbeddedExtension
+        extensionId={extensionId}
+        slotId={`dashboard-panel-${panelId}`}
+        className="w-full"
+        // Intentional for v1: extension panels are standalone widgets and do not
+        // receive the dashboard's filters/variables/date range as `context`.
+        initialHeight={180}
+        onReady={() => setReady(true)}
+        onUnavailable={() => {
+          // Clear the report-loading gate so report capture doesn't hang.
+          setReady(true);
+          setUnavailable(true);
+        }}
+      />
+    </div>
+  );
+}
+
 function MetricRenderer({
   rows,
   panel,

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

@@ -629,6 +629,8 @@ const messages = {
     off: "Off",
     since: "Since",
     sectionOptions: "部分選項",
+    extensionMissingId: "此擴充面板未選擇任何擴充功能。",
+    extensionUnavailable: "此擴充功能未與您共用，或已不存在。",
     panelOptions: "面板選項",
     fullScreen: "全螢幕",
     refresh: "重新整理",