elastic · chrisbmar · Mar 31, 2026 · Mar 16, 2026 · Mar 17, 2026 · Mar 18, 2026
diff --git a/x-pack/platform/plugins/shared/agent_builder/moon.yml b/x-pack/platform/plugins/shared/agent_builder/moon.yml
@@ -110,7 +110,6 @@ dependsOn:
   - '@kbn/core-elasticsearch-server-mocks'
   - '@kbn/core-data-streams-server'
   - '@kbn/task-manager-plugin'
-  - '@kbn/deeplinks-data-sources'
   - '@kbn/evals-plugin'
   - '@kbn/usage-api-plugin'
   - '@kbn/es-query'

@@ -0,0 +1,88 @@
+/*
+ * 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 from 'react';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiText, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export interface ActiveItemRowProps {
+  id: string;
+  name: string;
+  isSelected: boolean;
+  onSelect: () => void;
+  onRemove: () => void;
+  isRemoving?: boolean;
+  removeAriaLabel: string;
+  readOnlyContent?: React.ReactNode;
+}
+
+export const ActiveItemRow: React.FC<ActiveItemRowProps> = ({
+  name,
+  isSelected,
+  onSelect,
+  onRemove,
+  isRemoving = false,
+  removeAriaLabel,
+  readOnlyContent,
+}) => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <EuiFlexGroup
+      alignItems="center"
+      gutterSize="none"
+      responsive={false}
+      onClick={onSelect}
+      css={css`
+        padding: ${euiTheme.size.s} ${euiTheme.size.m};
+        cursor: pointer;
+        border-radius: ${euiTheme.border.radius.medium};
+        background-color: ${isSelected
+          ? euiTheme.colors.backgroundBaseInteractiveHover
+          : 'transparent'};
+        &:hover {
+          background-color: ${euiTheme.colors.backgroundBaseInteractiveHover};
+        }
+      `}
+    >
+      <EuiFlexItem
+        css={css`
+          min-width: 0;
+        `}
+      >
+        <EuiText
+          size="s"
+          css={css`
+            font-weight: ${isSelected
+              ? euiTheme.font.weight.semiBold
+              : euiTheme.font.weight.regular};
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          `}
+        >
+          {name}
+        </EuiText>
+      </EuiFlexItem>
+      {isSelected && (
+        <EuiFlexItem grow={false}>
+          {readOnlyContent ?? (
+            <EuiButtonIcon
+              iconType="cross"
+              aria-label={removeAriaLabel}
+              disabled={isRemoving}
+              onClick={(event: React.MouseEvent) => {
+                event.stopPropagation();
+                onRemove();
+              }}
+            />
+          )}
+        </EuiFlexItem>
+      )}
+    </EuiFlexGroup>
+  );
+};
@@ -5,4 +5,10 @@
  * 2.0.
  */
 
-export { AgentSelector } from './agent_selector';
+export const FLYOUT_WIDTH = '960px';
+
+export const CONTAINER_WIDTH = '1200px';
+
+export const ICON_DIMENSIONS = { width: 24, height: 28 } as const;
+
+export const SEARCH_LIST_WIDTH = '340px';
@@ -0,0 +1,145 @@
+/*
+ * 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, { useState } from 'react';
+import {
+  EuiConfirmModal,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiLoadingSpinner,
+  EuiTitle,
+  useEuiTheme,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
+
+interface ConfirmRemoveConfig {
+  title: string;
+  body: string;
+  confirmButtonText: string;
+  cancelButtonText: string;
+  onConfirm: () => void;
+}
+
+export interface DetailPanelLayoutProps {
+  isLoading: boolean;
+  isEmpty: boolean;
+  title: string;
+  showAutoIcon?: boolean;
+  headerActions: (openConfirmRemove: () => void) => React.ReactNode;
+  headerContent?: React.ReactNode;
+  children: React.ReactNode;
+  confirmRemove?: ConfirmRemoveConfig;
+}
+
+export const DetailPanelLayout: React.FC<DetailPanelLayoutProps> = ({
+  isLoading,
+  isEmpty,
+  title,
+  showAutoIcon = false,
+  headerActions,
+  headerContent,
+  children,
+  confirmRemove,
+}) => {
+  const { euiTheme } = useEuiTheme();
+  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
+
+  const openConfirmRemove = () => setIsConfirmOpen(true);
+
+  if (isLoading) {
+    return (
+      <EuiFlexGroup
+        justifyContent="center"
+        alignItems="center"
+        css={css`
+          padding: ${euiTheme.size.xxl};
+        `}
+      >
+        <EuiLoadingSpinner size="l" />
+      </EuiFlexGroup>
+    );
+  }
+
+  if (isEmpty) return null;
+
+  return (
+    <div
+      css={css`
+        height: 100%;
+        padding: 0;
+      `}
+    >
+      <div
+        css={css`
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          border: ${euiTheme.border.thin};
+          border-radius: ${euiTheme.size.xs};
+        `}
+      >
+        {/* Header: pinned at top, does not scroll */}
+        <div
+          css={css`
+            flex-shrink: 0;
+            padding: ${euiTheme.size.l};
+            border-bottom: ${euiTheme.border.thin};
+            background-color: ${euiTheme.colors.backgroundBaseSubdued};
+          `}
+        >
+          <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" responsive={false}>
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+                <EuiFlexItem grow={false}>
+                  <EuiTitle size="s">
+                    <h2>{title}</h2>
+                  </EuiTitle>
+                </EuiFlexItem>
+                {showAutoIcon && (
+                  <EuiFlexItem grow={false}>
+                    <EuiIcon type="logoElastic" size="m" aria-hidden={true} />
+                  </EuiFlexItem>
+                )}
+              </EuiFlexGroup>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>{headerActions(openConfirmRemove)}</EuiFlexItem>
+          </EuiFlexGroup>
+          {headerContent}
+        </div>
+
+        {/* Body: fills remaining height and scrolls on overflow */}
+        <div
+          css={css`
+            flex: 1;
+            min-height: 0;
+            overflow-y: auto;
+          `}
+        >
+          {children}
+        </div>
+      </div>
+
+      {confirmRemove && isConfirmOpen && (
+        <EuiConfirmModal
+          title={confirmRemove.title}
+          aria-label={confirmRemove.title}
+          onCancel={() => setIsConfirmOpen(false)}
+          onConfirm={() => {
+            setIsConfirmOpen(false);
+            confirmRemove.onConfirm();
+          }}
+          cancelButtonText={confirmRemove.cancelButtonText}
+          confirmButtonText={confirmRemove.confirmButtonText}
+          buttonColor="danger"
+        >
+          <p>{confirmRemove.body}</p>
+        </EuiConfirmModal>
+      )}
+    </div>
+  );
+};
@@ -0,0 +1,40 @@
+/*
+ * 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 from 'react';
+import { EuiText, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export interface DetailRowProps {
+  label: string;
+  children: React.ReactNode;
+  isLast?: boolean;
+}
+
+export const DetailRow: React.FC<DetailRowProps> = ({ label, children, isLast = false }) => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <div
+      css={css`
+        padding: ${euiTheme.size.m};
+        border-bottom: ${isLast ? 'none' : euiTheme.border.thin};
+      `}
+    >
+      <EuiText size="s">
+        <strong>{label}</strong>
+      </EuiText>
+      <div
+        css={css`
+          padding-top: ${euiTheme.size.s};
+        `}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};