From b8c2e91efdd4fd13d47be7f2d2a13c64d5afa39e Mon Sep 17 00:00:00 2001
From: Zachary Parikh <zachary.parikh@elastic.co>
Date: Thu, 2 Oct 2025 12:19:12 -0400
Subject: [PATCH 1/4] Add tech preview badge to welcome text

---
 .../components/common/tech_preview_badge.tsx  | 18 +++++
 .../components/common/welcome_text.tsx        | 70 +++++++++++++++++
 .../conversations/new_conversation_prompt.tsx | 78 +------------------
 3 files changed, 89 insertions(+), 77 deletions(-)
 create mode 100644 x-pack/platform/plugins/shared/onechat/public/application/components/common/tech_preview_badge.tsx
 create mode 100644 x-pack/platform/plugins/shared/onechat/public/application/components/common/welcome_text.tsx

diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/common/tech_preview_badge.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/common/tech_preview_badge.tsx
new file mode 100644
index 0000000000000..6c0d1a8617264
--- /dev/null
+++ b/x-pack/platform/plugins/shared/onechat/public/application/components/common/tech_preview_badge.tsx
@@ -0,0 +1,18 @@
+/*
+ * 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 { EuiBetaBadge } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+const techPreviewLabel = i18n.translate('xpack.onechat.techPreviewLabel', {
+  defaultMessage: 'Tech preview',
+});
+
+export const TechPreviewBadge: React.FC<{ iconOnly?: boolean }> = ({ iconOnly = false }) => {
+  return <EuiBetaBadge iconType={iconOnly ? 'flask' : undefined} label={techPreviewLabel} />;
+};
diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/common/welcome_text.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/common/welcome_text.tsx
new file mode 100644
index 0000000000000..1fa87f6cadb9f
--- /dev/null
+++ b/x-pack/platform/plugins/shared/onechat/public/application/components/common/welcome_text.tsx
@@ -0,0 +1,70 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiText, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import React from 'react';
+import { docLinks } from '../../../../common/doc_links';
+import { TechPreviewBadge } from './tech_preview_badge';
+
+export const WelcomeText: React.FC<{}> = () => {
+  const labels = {
+    container: i18n.translate('xpack.onechat.newConversationPrompt.container', {
+      defaultMessage: 'New conversation welcome prompt',
+    }),
+    title: i18n.translate('xpack.onechat.newConversationPrompt.title', {
+      defaultMessage: 'Welcome to Elastic Agent Builder',
+    }),
+    subtitle: (
+      <FormattedMessage
+        id="xpack.onechat.newConversationPrompt.subtitle"
+        defaultMessage="Work interactively with your AI {agentsLink} using the chat interface. Your selected agent answers questions by searching your data with its assigned {toolsLink}."
+        values={{
+          agentsLink: (
+            <EuiLink href={docLinks.agentBuilderAgents} target="_blank">
+              {i18n.translate('xpack.onechat.newConversationPrompt.agentsLinkText', {
+                defaultMessage: 'agents',
+              })}
+            </EuiLink>
+          ),
+          toolsLink: (
+            <EuiLink href={docLinks.tools} target="_blank">
+              {i18n.translate('xpack.onechat.newConversationPrompt.toolsLinkText', {
+                defaultMessage: 'tools',
+              })}
+            </EuiLink>
+          ),
+        }}
+      />
+    ),
+  };
+  return (
+    <EuiFlexGroup
+      direction="column"
+      alignItems="center"
+      justifyContent="center"
+      aria-label={labels.container}
+    >
+      <EuiFlexItem grow={false}>
+        <EuiIcon color="primary" size="xxl" type="logoElastic" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <TechPreviewBadge />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiTitle>
+          <h2>{labels.title}</h2>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiText textAlign="center" color="subdued">
+          <p>{labels.subtitle}</p>
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/conversations/new_conversation_prompt.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/conversations/new_conversation_prompt.tsx
index 7057d8f2f2a09..8360bc27f5596 100644
--- a/x-pack/platform/plugins/shared/onechat/public/application/components/conversations/new_conversation_prompt.tsx
+++ b/x-pack/platform/plugins/shared/onechat/public/application/components/conversations/new_conversation_prompt.tsx
@@ -10,17 +10,12 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
-  EuiText,
-  EuiTitle,
-  EuiLink,
-  EuiButton,
   useEuiFontSize,
   useEuiTheme,
 } from '@elastic/eui';
 import type { ReactNode } from 'react';
 import React from 'react';
 import { css } from '@emotion/react';
-import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useNavigation } from '../../hooks/use_navigation';
 import { appPaths } from '../../utils/app_paths';
@@ -28,83 +23,12 @@ import { ConversationContentWithMargins } from './conversation_grid';
 import { ConversationInputForm } from './conversation_input/conversation_input_form';
 import { useConversationGridCenterColumnWidth } from './conversation_grid.styles';
 import { docLinks } from '../../../../common/doc_links';
+import { WelcomeText } from '../common/welcome_text';
 
 const fullHeightStyles = css`
   height: 100%;
 `;
 
-const WelcomeText: React.FC<{}> = () => {
-  const labels = {
-    container: i18n.translate('xpack.onechat.newConversationPrompt.container', {
-      defaultMessage: 'New conversation welcome prompt',
-    }),
-    title: i18n.translate('xpack.onechat.newConversationPrompt.title', {
-      defaultMessage: 'Welcome to Elastic Agent Builder',
-    }),
-    subtitle: (
-      <FormattedMessage
-        id="xpack.onechat.newConversationPrompt.subtitle"
-        defaultMessage="Work interactively with your AI {agentsLink} using the chat interface. Your selected agent answers questions by searching your data with its assigned {toolsLink}."
-        values={{
-          agentsLink: (
-            <EuiLink href={docLinks.agentBuilderAgents} target="_blank">
-              {i18n.translate('xpack.onechat.newConversationPrompt.agentsLinkText', {
-                defaultMessage: 'agents',
-              })}
-            </EuiLink>
-          ),
-          toolsLink: (
-            <EuiLink href={docLinks.tools} target="_blank">
-              {i18n.translate('xpack.onechat.newConversationPrompt.toolsLinkText', {
-                defaultMessage: 'tools',
-              })}
-            </EuiLink>
-          ),
-        }}
-      />
-    ),
-  };
-  return (
-    <EuiFlexGroup
-      direction="column"
-      alignItems="center"
-      justifyContent="center"
-      aria-label={labels.container}
-    >
-      <EuiFlexItem grow={false}>
-        <EuiIcon color="primary" size="xxl" type="logoElastic" />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiTitle>
-          <h2>{labels.title}</h2>
-        </EuiTitle>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiText textAlign="center" color="subdued">
-          <p>{labels.subtitle}</p>
-        </EuiText>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiButton
-          href={docLinks.agentBuilder}
-          target="_blank"
-          size="m"
-          aria-label={i18n.translate(
-            'xpack.onechat.newConversationPrompt.agentBuilderDocsAriaLabel',
-            {
-              defaultMessage: 'Read Agent Builder documentation',
-            }
-          )}
-        >
-          {i18n.translate('xpack.onechat.newConversationPrompt.agentBuilderDocs', {
-            defaultMessage: 'Read the docs',
-          })}
-        </EuiButton>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-};
-
 const cards: Array<{
   key: string;
   title: ReactNode;

From bcad03f20b3f4c8ae5eed4d979768e5a040a2495 Mon Sep 17 00:00:00 2001
From: Zachary Parikh <zachary.parikh@elastic.co>
Date: Thu, 2 Oct 2025 13:25:32 -0400
Subject: [PATCH 2/4] Add tech preview badge to nav items

---
 .../search/plugins/enterprise_search/public/navigation_tree.ts  | 2 ++
 .../search/plugins/serverless_search/public/navigation_tree.ts  | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/x-pack/solutions/search/plugins/enterprise_search/public/navigation_tree.ts b/x-pack/solutions/search/plugins/enterprise_search/public/navigation_tree.ts
index 55f525707a8b8..5e85fa0f974b4 100644
--- a/x-pack/solutions/search/plugins/enterprise_search/public/navigation_tree.ts
+++ b/x-pack/solutions/search/plugins/enterprise_search/public/navigation_tree.ts
@@ -125,8 +125,10 @@ export const getNavigationTreeDefinition = ({
                   link: 'dashboards',
                 },
                 {
+                  badgeTypeV2: 'techPreview',
                   iconV2: agentsIcon,
                   link: 'agent_builder',
+                  withBadge: true,
                 },
                 {
                   badgeOptions: {
diff --git a/x-pack/solutions/search/plugins/serverless_search/public/navigation_tree.ts b/x-pack/solutions/search/plugins/serverless_search/public/navigation_tree.ts
index 3b3414a842fe5..c6bf2d32191d1 100644
--- a/x-pack/solutions/search/plugins/serverless_search/public/navigation_tree.ts
+++ b/x-pack/solutions/search/plugins/serverless_search/public/navigation_tree.ts
@@ -100,6 +100,8 @@ export const navigationTree = ({ isAppRegistered }: ApplicationStart): Navigatio
           {
             iconV2: agentsIcon, // Temp svg until we have icon in EUI
             link: 'agent_builder',
+            withBadge: true,
+            badgeTypeV2: 'techPreview',
           },
           {
             link: 'workflows',

From da6ceb2342dfe9d15a76b4612aea4c60d55d33e1 Mon Sep 17 00:00:00 2001
From: Zachary Parikh <zachary.parikh@elastic.co>
Date: Thu, 2 Oct 2025 13:25:51 -0400
Subject: [PATCH 3/4] Add tech preview badge to agents / tools page titles

---
 .../onechat/public/application/components/agents/list/agents.tsx | 1 +
 .../shared/onechat/public/application/components/tools/tools.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/agents/list/agents.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/agents/list/agents.tsx
index 86f6274355018..c921681c27ac0 100644
--- a/x-pack/platform/plugins/shared/onechat/public/application/components/agents/list/agents.tsx
+++ b/x-pack/platform/plugins/shared/onechat/public/application/components/agents/list/agents.tsx
@@ -45,6 +45,7 @@ export const OnechatAgents = () => {
           pageTitle={i18n.translate('xpack.onechat.agents.title', {
             defaultMessage: 'Agents',
           })}
+          iconType="flask"
           description={
             <FormattedMessage
               id="xpack.onechat.agents.description"
diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/tools.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/tools.tsx
index 1e4a4ebdf0f4c..7e9811dda6bb3 100644
--- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/tools.tsx
+++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/tools.tsx
@@ -28,6 +28,7 @@ export const OnechatTools = () => {
     <KibanaPageTemplate>
       <KibanaPageTemplate.Header
         pageTitle={labels.tools.title}
+        iconType="flask"
         description={
           <FormattedMessage
             id="xpack.onechat.tools.toolsDescription"

From d2c43f8f00e0761871b14881e0cc44c0d2f8bd59 Mon Sep 17 00:00:00 2001
From: Zachary Parikh <zachary.parikh@elastic.co>
Date: Thu, 2 Oct 2025 14:08:33 -0400
Subject: [PATCH 4/4] Use text badge in titles

---
 .../components/agents/list/agents.tsx         | 12 ++++--
 .../components/common/tech_preview.tsx        | 40 +++++++++++++++++++
 .../components/common/tech_preview_badge.tsx  | 18 ---------
 .../components/common/welcome_text.tsx        |  2 +-
 .../application/components/tools/tools.tsx    |  4 +-
 5 files changed, 51 insertions(+), 25 deletions(-)
 create mode 100644 x-pack/platform/plugins/shared/onechat/public/application/components/common/tech_preview.tsx
 delete mode 100644 x-pack/platform/plugins/shared/onechat/public/application/components/common/tech_preview_badge.tsx

diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/agents/list/agents.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/agents/list/agents.tsx
index c921681c27ac0..846d6ae91e2c0 100644
--- a/x-pack/platform/plugins/shared/onechat/public/application/components/agents/list/agents.tsx
+++ b/x-pack/platform/plugins/shared/onechat/public/application/components/agents/list/agents.tsx
@@ -16,6 +16,7 @@ import { AgentsList } from './agents_list';
 import { useNavigation } from '../../../hooks/use_navigation';
 import { appPaths } from '../../../utils/app_paths';
 import { DeleteAgentProvider } from '../../../context/delete_agent_context';
+import { TechPreviewTitle } from '../../common/tech_preview';
 
 export const OnechatAgents = () => {
   const { euiTheme } = useEuiTheme();
@@ -42,10 +43,13 @@ export const OnechatAgents = () => {
       <KibanaPageTemplate>
         <KibanaPageTemplate.Header
           css={headerStyles}
-          pageTitle={i18n.translate('xpack.onechat.agents.title', {
-            defaultMessage: 'Agents',
-          })}
-          iconType="flask"
+          pageTitle={
+            <TechPreviewTitle
+              title={i18n.translate('xpack.onechat.agents.title', {
+                defaultMessage: 'Agents',
+              })}
+            />
+          }
           description={
             <FormattedMessage
               id="xpack.onechat.agents.description"
diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/common/tech_preview.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/common/tech_preview.tsx
new file mode 100644
index 0000000000000..5e5a365ae94b4
--- /dev/null
+++ b/x-pack/platform/plugins/shared/onechat/public/application/components/common/tech_preview.tsx
@@ -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 { EuiBetaBadge, EuiFlexGroup } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+const techPreviewLabel = i18n.translate('xpack.onechat.techPreviewLabel', {
+  defaultMessage: 'Tech preview',
+});
+
+const badgeAnchorStyles = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const TechPreviewBadge: React.FC<{ iconOnly?: boolean }> = ({ iconOnly = false }) => {
+  return (
+    <EuiBetaBadge
+      iconType={iconOnly ? 'flask' : undefined}
+      label={techPreviewLabel}
+      anchorProps={{ css: badgeAnchorStyles }}
+    />
+  );
+};
+
+export const TechPreviewTitle: React.FC<{ title: string }> = ({ title }) => {
+  return (
+    <EuiFlexGroup component="span" gutterSize="s" alignItems="center">
+      {title}
+      <TechPreviewBadge />
+    </EuiFlexGroup>
+  );
+};
diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/common/tech_preview_badge.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/common/tech_preview_badge.tsx
deleted file mode 100644
index 6c0d1a8617264..0000000000000
--- a/x-pack/platform/plugins/shared/onechat/public/application/components/common/tech_preview_badge.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
- * 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 { EuiBetaBadge } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import React from 'react';
-
-const techPreviewLabel = i18n.translate('xpack.onechat.techPreviewLabel', {
-  defaultMessage: 'Tech preview',
-});
-
-export const TechPreviewBadge: React.FC<{ iconOnly?: boolean }> = ({ iconOnly = false }) => {
-  return <EuiBetaBadge iconType={iconOnly ? 'flask' : undefined} label={techPreviewLabel} />;
-};
diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/common/welcome_text.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/common/welcome_text.tsx
index 1fa87f6cadb9f..fa7345e311cbd 100644
--- a/x-pack/platform/plugins/shared/onechat/public/application/components/common/welcome_text.tsx
+++ b/x-pack/platform/plugins/shared/onechat/public/application/components/common/welcome_text.tsx
@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import React from 'react';
 import { docLinks } from '../../../../common/doc_links';
-import { TechPreviewBadge } from './tech_preview_badge';
+import { TechPreviewBadge } from './tech_preview';
 
 export const WelcomeText: React.FC<{}> = () => {
   const labels = {
diff --git a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/tools.tsx b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/tools.tsx
index 7e9811dda6bb3..4bd394b6da2b4 100644
--- a/x-pack/platform/plugins/shared/onechat/public/application/components/tools/tools.tsx
+++ b/x-pack/platform/plugins/shared/onechat/public/application/components/tools/tools.tsx
@@ -19,6 +19,7 @@ import { appPaths } from '../../utils/app_paths';
 import { labels } from '../../utils/i18n';
 import { OnechatToolsTable } from './table/tools_table';
 import { McpConnectionButton } from './mcp_server/mcp_connection_button';
+import { TechPreviewTitle } from '../common/tech_preview';
 export const OnechatTools = () => {
   const { euiTheme } = useEuiTheme();
   const { createTool } = useToolsActions();
@@ -27,8 +28,7 @@ export const OnechatTools = () => {
   return (
     <KibanaPageTemplate>
       <KibanaPageTemplate.Header
-        pageTitle={labels.tools.title}
-        iconType="flask"
+        pageTitle={<TechPreviewTitle title={labels.tools.title} />}
         description={
           <FormattedMessage
             id="xpack.onechat.tools.toolsDescription"