[Agent Builder] move visualization attachment to a new attachments system (#266600)

## Summary

Fixes #261488

Migrates visualization results to the Agent Builder attachment framework
so visualization attachments can render inline with the same header and
action-button system as other attachments.

- Registers a `visualization` attachment UI definition that reuses
`VisualizeLens` for inline rendering.
- Adds inline renderer callbacks so attachment content can register
dynamic action buttons in the attachment header -
`registerActionButtons` - this is aligned with how we do the same for
canvas for dashboards.
- Moves Lens "View configuration" and "Save to dashboard" actions into
`BaseVisualization`, including dashboard permission handling.
- Keeps local fallback actions for ES|QL `<visualization />` output that
is rendered outside the attachment flow.

## Screenshots

Visualization attachment:
<img width="688" height="646" alt="Screenshot 2026-04-30 at 11 27 27"
src="https://github.com/user-attachments/assets/9da652db-43c7-4193-9651-46136d889e50"
/>

ES|QL `<visualization />` tag:
<img width="652" height="815" alt="Screenshot 2026-04-30 at 11 54 33"
src="https://github.com/user-attachments/assets/54ccd80b-695c-47c9-89d0-cc70d9fd1d2a"
/>

Author: mbondyra

x-pack/platform/packages/shared/agent-builder/agent-builder-browser/attachments/contract.ts

@@ -52,6 +52,14 @@ export interface CanvasRenderCallbacks {
   setPreviewState?: (previewState: AttachmentPreviewState) => void;
 }
 
+/**
+ * Callbacks available to inline content renderers.
+ */
+export interface InlineRenderCallbacks {
+  /** Register action buttons to display in the inline attachment header */
+  registerActionButtons: (buttons: ActionButton[]) => void;
+}
+
 /**
  * Parameters passed when requesting action buttons for an inline-rendered attachment.
  */
@@ -126,8 +134,14 @@ export interface AttachmentUIDefinition<TAttachment extends UnknownAttachment =
    * Optional custom content renderer for inline attachment display.
    * When provided, attachments can be rendered inline in the conversation
    * using the <render_attachment> tag.
+   *
+   * The `callbacks` object provides:
+   * - `registerActionButtons`: dynamically register action buttons in the inline header
    */
-  renderInlineContent?: (props: AttachmentRenderProps<TAttachment>) => ReactNode;
+  renderInlineContent?: (
+    props: AttachmentRenderProps<TAttachment>,
+    callbacks?: InlineRenderCallbacks
+  ) => ReactNode;
   /**
    * Optional preferred width for the canvas flyout when opened in full-screen context.
    * Accepts any valid CSS width value (e.g. `'600px'`, `'40vw'`).

x-pack/platform/packages/shared/agent-builder/agent-builder-browser/attachments/index.ts

@@ -10,6 +10,7 @@ export type {
   AttachmentServiceStartContract,
   AttachmentRenderProps,
   CanvasRenderCallbacks,
+  InlineRenderCallbacks,
   GetActionButtonsParams,
   ActionButton,
   AttachmentPreviewState,

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -11004,7 +11004,6 @@
     "xpack.agentBuilder.conversation.toolResponseFlyout.title": "Examiner la réponse de l'outil",
     "xpack.agentBuilder.conversation.traceFlyout.title": "Trace",
     "xpack.agentBuilder.conversation.viewTraceButton": "Afficher la trace",
-    "xpack.agentBuilder.conversation.visualization.edit": "Modifier la visualisation",
     "xpack.agentBuilder.conversation.visualization.saveToDashboard": "Enregistrer dans le tableau de bord",
     "xpack.agentBuilder.conversationActions.actions": "Plus",
     "xpack.agentBuilder.conversationActions.actionsAriaLabel": "Plus",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -11049,7 +11049,6 @@
     "xpack.agentBuilder.conversation.toolResponseFlyout.title": "ツールの応答を検査",
     "xpack.agentBuilder.conversation.traceFlyout.title": "トレース",
     "xpack.agentBuilder.conversation.viewTraceButton": "トレースを表示",
-    "xpack.agentBuilder.conversation.visualization.edit": "可視化を編集",
     "xpack.agentBuilder.conversation.visualization.saveToDashboard": "ダッシュボードに保存",
     "xpack.agentBuilder.conversationActions.actions": "詳細",
     "xpack.agentBuilder.conversationActions.actionsAriaLabel": "詳細",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -11047,7 +11047,6 @@
     "xpack.agentBuilder.conversation.toolResponseFlyout.title": "检查工具响应",
     "xpack.agentBuilder.conversation.traceFlyout.title": "追踪",
     "xpack.agentBuilder.conversation.viewTraceButton": "查看追踪",
-    "xpack.agentBuilder.conversation.visualization.edit": "编辑可视化",
     "xpack.agentBuilder.conversation.visualization.saveToDashboard": "保存到仪表板",
     "xpack.agentBuilder.conversationActions.actions": "更多",
     "xpack.agentBuilder.conversationActions.actionsAriaLabel": "更多",

x-pack/platform/plugins/shared/agent_builder/public/application/components/attachments/visualization_attachment.tsx

@@ -9,7 +9,7 @@ import React, { Suspense } from 'react';
 import { EuiLoadingSpinner } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { VisualizationAttachment } from '@kbn/agent-builder-common/attachments';
-import type { AttachmentUIDefinition } from '@kbn/agent-builder-browser/attachments';
+import { type AttachmentUIDefinition } from '@kbn/agent-builder-browser/attachments';
 import type { AgentBuilderStartDependencies } from '../../../types';
 
 const LazyVisualizeLens = React.lazy(() =>
@@ -26,13 +26,16 @@ export const createVisualizationAttachmentDefinition = ({
   startDependencies: AgentBuilderStartDependencies;
 }): AttachmentUIDefinition<VisualizationAttachment> => {
   return {
-    getLabel: (attachment) =>
-      attachment.data.query ??
-      i18n.translate('xpack.agentBuilder.attachments.visualization.label', {
-        defaultMessage: 'Visualization',
-      }),
+    getLabel: (attachment: VisualizationAttachment): string => {
+      const { title } = attachment.data.visualization;
+      return typeof title === 'string'
+        ? title
+        : i18n.translate('xpack.agentBuilder.attachments.visualization.label', {
+            defaultMessage: 'Visualization',
+          });
+    },
     getIcon: () => 'lensApp',
-    renderInlineContent: ({ attachment, screenContext }) => {
+    renderInlineContent: ({ attachment, screenContext }, callbacks) => {
       const timeRange = attachment.data.time_range ?? screenContext?.time_range;
 
       return (
@@ -43,6 +46,7 @@ export const createVisualizationAttachmentDefinition = ({
             lens={startDependencies.lens}
             uiActions={startDependencies.uiActions}
             timeRange={timeRange}
+            registerActionButtons={callbacks?.registerActionButtons}
           />
         </Suspense>
       );

x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_rounds/round_response/attachments/inline_attachment_with_actions.test.tsx

@@ -0,0 +1,109 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useEffect } from 'react';
+import { render, screen } from '@testing-library/react';
+import {
+  ActionButtonType,
+  type AttachmentRenderProps,
+  type InlineRenderCallbacks,
+} from '@kbn/agent-builder-browser/attachments';
+import type { UnknownAttachment } from '@kbn/agent-builder-common/attachments';
+import type { AttachmentsService } from '../../../../../../services/attachments/attachements_service';
+import { InlineAttachmentWithActions } from './inline_attachment_with_actions';
+
+const mockOpenCanvas = jest.fn();
+const mockSetPreviewedAttachmentKey = jest.fn();
+const mockInvalidateConversation = jest.fn();
+const mockOpenSidebarConversation = jest.fn();
+const mockUpdatePersistedConversationId = jest.fn();
+
+jest.mock('./canvas_context', () => ({
+  getAttachmentPreviewKey: (attachmentId: string, version?: number) =>
+    `${attachmentId}:${version ?? 'latest'}`,
+  useCanvasContext: () => ({
+    openCanvas: mockOpenCanvas,
+    previewedAttachmentKey: null,
+    setPreviewedAttachmentKey: mockSetPreviewedAttachmentKey,
+  }),
+}));
+
+jest.mock('../../../../../context/conversation/conversation_context', () => ({
+  useConversationContext: () => ({
+    conversationActions: { invalidateConversation: mockInvalidateConversation },
+  }),
+}));
+
+jest.mock('../../../../../hooks/use_agent_builder_service', () => ({
+  useAgentBuilderServices: () => ({
+    openSidebarConversation: mockOpenSidebarConversation,
+  }),
+}));
+
+jest.mock('../../../../../hooks/use_persisted_conversation_id', () => ({
+  usePersistedConversationId: () => ({
+    updatePersistedConversationId: mockUpdatePersistedConversationId,
+  }),
+}));
+
+const dynamicActionHandler = jest.fn();
+
+const DynamicInlineContent = ({ callbacks }: { callbacks?: InlineRenderCallbacks }) => {
+  const { registerActionButtons } = callbacks ?? {};
+
+  useEffect(() => {
+    registerActionButtons?.([
+      {
+        label: 'Dynamic action',
+        type: ActionButtonType.PRIMARY,
+        handler: dynamicActionHandler,
+      },
+    ]);
+  }, [registerActionButtons]);
+
+  return <div>Inline content</div>;
+};
+
+describe('InlineAttachmentWithActions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders action buttons registered by inline content', async () => {
+    const attachment: UnknownAttachment = { id: 'attachment-1', type: 'test', data: {} };
+    const attachmentsService = {
+      getAttachmentUiDefinition: jest.fn().mockReturnValue({
+        getLabel: () => 'Test attachment',
+        renderInlineContent: (
+          _props: AttachmentRenderProps<UnknownAttachment>,
+          callbacks?: InlineRenderCallbacks
+        ) => <DynamicInlineContent callbacks={callbacks} />,
+        getActionButtons: () => [
+          {
+            label: 'Static action',
+            type: ActionButtonType.SECONDARY,
+            handler: jest.fn(),
+          },
+        ],
+      }),
+      updateOrigin: jest.fn(),
+    };
+
+    render(
+      <InlineAttachmentWithActions
+        attachment={attachment}
+        attachmentsService={attachmentsService as unknown as AttachmentsService}
+        conversationId="conversation-1"
+        isSidebar={false}
+      />
+    );
+
+    expect(screen.getByText('Inline content')).not.toBeNull();
+    expect(screen.getByRole('button', { name: 'Static action' })).not.toBeNull();
+    expect(await screen.findByRole('button', { name: 'Dynamic action' })).not.toBeNull();
+  });
+});

x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_rounds/round_response/attachments/inline_attachment_with_actions.tsx

@@ -5,12 +5,12 @@
  * 2.0.
  */
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import type {
   UnknownAttachment,
   ScreenContextAttachmentData,
 } from '@kbn/agent-builder-common/attachments';
-import type { AttachmentPreviewState } from '@kbn/agent-builder-browser/attachments';
+import type { ActionButton, AttachmentPreviewState } from '@kbn/agent-builder-browser/attachments';
 import { EuiSplitPanel } from '@elastic/eui';
 import { css } from '@emotion/react';
 import type { AttachmentsService } from '../../../../../../services/attachments/attachements_service';
@@ -77,8 +77,19 @@ export const InlineAttachmentWithActions: React.FC<InlineAttachmentWithActionsPr
 
   const uiDefinition = attachmentsService.getAttachmentUiDefinition(attachment.type);
   const attachmentPreviewKey = getAttachmentPreviewKey(attachment.id, version);
+  const [dynamicButtonsState, setDynamicButtonsState] = useState<{
+    key: string;
+    buttons: ActionButton[];
+  }>({ key: attachmentPreviewKey, buttons: [] });
 
-  const inlineActionButtons = useMemo(
+  const registerActionButtons = useCallback(
+    (buttons: ActionButton[]) => {
+      setDynamicButtonsState({ key: attachmentPreviewKey, buttons });
+    },
+    [attachmentPreviewKey]
+  );
+
+  const staticActionButtons = useMemo(
     () =>
       uiDefinition?.getActionButtons?.({
         attachment,
@@ -92,7 +103,7 @@ export const InlineAttachmentWithActions: React.FC<InlineAttachmentWithActionsPr
             nextPreviewState === 'previewing' ? attachmentPreviewKey : null
           );
         },
-      }),
+      }) ?? [],
     [
       uiDefinition,
       attachment,
@@ -105,6 +116,14 @@ export const InlineAttachmentWithActions: React.FC<InlineAttachmentWithActionsPr
     ]
   );
 
+  const inlineActionButtons = useMemo(
+    () => [
+      ...staticActionButtons,
+      ...(dynamicButtonsState.key === attachmentPreviewKey ? dynamicButtonsState.buttons : []),
+    ],
+    [staticActionButtons, attachmentPreviewKey, dynamicButtonsState]
+  );
+
   const isPreviewingAttachment = previewedAttachmentKey === attachmentPreviewKey;
 
   const resolvedPreviewBadgeState: AttachmentPreviewState =
@@ -131,12 +150,17 @@ export const InlineAttachmentWithActions: React.FC<InlineAttachmentWithActionsPr
         previewBadgeState={resolvedPreviewBadgeState}
       />
       <EuiSplitPanel.Inner grow={false} paddingSize="none">
-        {uiDefinition?.renderInlineContent?.({
-          attachment,
-          isSidebar,
-          screenContext,
-          openSidebarConversation: isSidebar ? undefined : openSidebarConversation,
-        })}
+        {uiDefinition?.renderInlineContent?.(
+          {
+            attachment,
+            isSidebar,
+            screenContext,
+            openSidebarConversation: isSidebar ? undefined : openSidebarConversation,
+          },
+          {
+            registerActionButtons,
+          }
+        )}
       </EuiSplitPanel.Inner>
     </EuiSplitPanel.Outer>
   );