From 5272bcf49b81ef0a30e72a7da86c36820880a06c Mon Sep 17 00:00:00 2001
From: Boris Ilyushonak <boris.ilyushonak@elastic.co>
Date: Fri, 23 Jan 2026 18:32:25 +0100
Subject: [PATCH 1/4] [Security Solutions] Trial Companion - enable in
 serverless

---
 config/serverless.security.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/serverless.security.yml b/config/serverless.security.yml
index ea373c97187a3..61558a904ee1f 100644
--- a/config/serverless.security.yml
+++ b/config/serverless.security.yml
@@ -256,7 +256,7 @@ xpack.alerting.rules.run.ruleTypeOverrides:
 # Experimental Security Solution features
 
 # These features are disabled in Serverless until fully tested
-xpack.securitySolution.enableExperimental: [riskScoreAssistantToolDisabled, disable:enableRiskScorePrivmonModifier, disable:kubernetesEnabled]
+xpack.securitySolution.enableExperimental: [riskScoreAssistantToolDisabled, disable:enableRiskScorePrivmonModifier, disable:kubernetesEnabled, trialCompanionEnabled]
 
 # AI Assistant config
 aiAssistantManagementSelection.preferredAIAssistantType: 'security'

From de0106e3d8c28fcd201e74a48e092a9ff9908d6a Mon Sep 17 00:00:00 2001
From: Boris Ilyushonak <boris.ilyushonak@elastic.co>
Date: Thu, 29 Jan 2026 15:28:33 +0100
Subject: [PATCH 2/4] [Security Solutions] Trial Companion - addjust UI design

---
 config/serverless.security.yml                |   2 +-
 .../nba_get_setup_panel.stories.tsx           |   2 +-
 .../trial_companion/nba_get_setup_panel.tsx   | 188 +++++++++++-------
 .../trial_companion/trial_companion.tsx       |   2 +-
 4 files changed, 122 insertions(+), 72 deletions(-)

diff --git a/config/serverless.security.yml b/config/serverless.security.yml
index 61558a904ee1f..ea373c97187a3 100644
--- a/config/serverless.security.yml
+++ b/config/serverless.security.yml
@@ -256,7 +256,7 @@ xpack.alerting.rules.run.ruleTypeOverrides:
 # Experimental Security Solution features
 
 # These features are disabled in Serverless until fully tested
-xpack.securitySolution.enableExperimental: [riskScoreAssistantToolDisabled, disable:enableRiskScorePrivmonModifier, disable:kubernetesEnabled, trialCompanionEnabled]
+xpack.securitySolution.enableExperimental: [riskScoreAssistantToolDisabled, disable:enableRiskScorePrivmonModifier, disable:kubernetesEnabled]
 
 # AI Assistant config
 aiAssistantManagementSelection.preferredAIAssistantType: 'security'
diff --git a/x-pack/solutions/security/plugins/security_solution/public/trial_companion/nba_get_setup_panel.stories.tsx b/x-pack/solutions/security/plugins/security_solution/public/trial_companion/nba_get_setup_panel.stories.tsx
index 0eb161c85f3e8..abba7b9149344 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/trial_companion/nba_get_setup_panel.stories.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/trial_companion/nba_get_setup_panel.stories.tsx
@@ -10,7 +10,7 @@ import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { NBA_TODO_LIST } from './nba_translations';
 import { Milestone } from '../../common/trial_companion/types';
 import type { YourTrialCompanionProps } from './nba_get_setup_panel';
-import { YourTrialCompanion } from './nba_get_setup_panel';
+import YourTrialCompanion from './nba_get_setup_panel';
 
 const meta: Meta<typeof YourTrialCompanion> = {
   component: YourTrialCompanion,
diff --git a/x-pack/solutions/security/plugins/security_solution/public/trial_companion/nba_get_setup_panel.tsx b/x-pack/solutions/security/plugins/security_solution/public/trial_companion/nba_get_setup_panel.tsx
index 01112bbd3eab5..03e95b12d2682 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/trial_companion/nba_get_setup_panel.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/trial_companion/nba_get_setup_panel.tsx
@@ -19,12 +19,13 @@ import {
   EuiIcon,
   EuiSpacer,
   EuiButton,
-  EuiButtonEmpty,
   EuiHorizontalRule,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiText,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import type { EuiThemeComputed } from '@elastic/eui-theme-common';
 import { postNBADismiss } from './api';
 import { TrialCompanionEventTypes } from '../common/lib/telemetry/events/trial_companion/types';
 import { useKibana } from '../common/lib/kibana';
@@ -47,12 +48,14 @@ export interface YourTrialCompanionTODOItemProps {
   setExpandedItemId: (id: Milestone | null) => void;
   trigger: 'open' | 'closed';
   key: Key;
+  showTopBorder: boolean;
+  showBottomBorder: boolean;
 }
 
-function buttonContent(completed: number, total: number) {
+function buttonContent(completed: number, total: number, euiTheme: EuiThemeComputed) {
   return (
     <>
-      <EuiTitle size="xs">
+      <EuiTitle size="s">
         <h4>
           <FormattedMessage
             id="xpack.securitySolution.trialNotifications.yourTrialCompanion.title"
@@ -60,11 +63,13 @@ function buttonContent(completed: number, total: number) {
           />
         </h4>
       </EuiTitle>
+      <EuiSpacer css={css({ blockSize: euiTheme.size.m })} />
       <FormattedMessage
         id="xpack.securitySolution.trialNotifications.yourTrialCompanion.stepsCompleted"
         defaultMessage="{completed}/{total} steps completed"
         values={{ completed, total }}
       />
+      <EuiSpacer size="s" />
       <EuiProgress value={completed} max={total} size="m" />
     </>
   );
@@ -72,24 +77,25 @@ function buttonContent(completed: number, total: number) {
 
 function itemButtonContent(iconType: string, color: string, title: string, milestoneId: Milestone) {
   return (
-    <div>
-      <EuiTitle size="xs" css={{ fontWeight: 'normal' }}>
-        <div>
-          <EuiIcon
-            type={iconType}
-            size="m"
-            color={color}
-            data-test-subj={`${TEST_SUBJ_PREFIX}-item-icon-${milestoneId}`}
-          />
-          &nbsp;
+    <EuiFlexGroup alignItems="center" responsive={false}>
+      <EuiFlexItem grow={false}>
+        <EuiIcon
+          type={iconType}
+          size="m"
+          color={color}
+          data-test-subj={`${TEST_SUBJ_PREFIX}-item-icon-${milestoneId}`}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiText size="m">
           <FormattedMessage
             id="xpack.securitySolution.trialNotifications.yourTrialCompanion.item.title"
             defaultMessage="{title}"
             values={{ title }}
           />
-        </div>
-      </EuiTitle>
-    </div>
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }
 
@@ -98,8 +104,11 @@ export const YourTrialCompanionTODOItem: React.FC<YourTrialCompanionTODOItemProp
   completed,
   setExpandedItemId,
   trigger,
+  showTopBorder,
+  showBottomBorder,
 }) => {
   const { analytics, application } = useKibana().services;
+  const { euiTheme } = useEuiTheme();
   const iconType = completed.includes(item.milestoneId)
     ? 'checkInCircleFilled'
     : RadioCircleIconSVG;
@@ -128,38 +137,69 @@ export const YourTrialCompanionTODOItem: React.FC<YourTrialCompanionTODOItemProp
 
   return (
     <>
-      <EuiSpacer size="s" />
+      {showTopBorder && trigger === 'open' && <EuiHorizontalRule margin="none" />}
       <EuiAccordion
         id={accordionId}
         buttonContent={itemButtonContent(iconType, color, item.translate.title, item.milestoneId)}
+        buttonProps={{ css: css({ '&:hover': { 'text-decoration': 'none' } }) }}
         arrowDisplay="right"
-        borders={trigger === 'open' ? 'horizontal' : 'none'}
-        buttonProps={{ paddingSize: 's' }}
-        paddingSize="s"
         onToggle={onToggle}
         forceState={trigger}
         data-test-subj={`${TEST_SUBJ_PREFIX}-item-${item.milestoneId}`}
         key={item.milestoneId}
+        css={css({
+          '&.euiAccordion-isOpen': {
+            paddingBottom: euiTheme.size.m,
+            paddingTop: euiTheme.size.m,
+          },
+        })}
+        element="fieldset"
       >
         <EuiSpacer size="s" />
-        <FormattedMessage
-          id="xpack.securitySolution.trialNotifications.trialNotification.message"
-          defaultMessage="{message}"
-          values={{ message: item.translate.message }}
-        />
-        {action && viewButtonText && (
-          <>
-            <EuiSpacer size="s" />
-            <EuiButton size="s" onClick={onViewButton} fill={true}>
-              <FormattedMessage
-                id="xpack.securitySolution.trialNotifications.trialNotification.viewButton"
-                defaultMessage="{viewButtonText}"
-                values={{ viewButtonText }}
-              />
-            </EuiButton>
-          </>
-        )}
+        <EuiFlexGroup
+          responsive={false}
+          justifyContent="flexStart"
+          alignItems="center"
+          gutterSize="m"
+        >
+          <EuiFlexItem grow={false}>
+            <EuiIcon type="empty" size="m" />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup
+              responsive={false}
+              direction="column"
+              gutterSize="m"
+              justifyContent="flexStart"
+              alignItems="flexStart"
+            >
+              <EuiFlexItem>
+                <FormattedMessage
+                  id="xpack.securitySolution.trialNotifications.trialNotification.message"
+                  defaultMessage="{message}"
+                  values={{ message: item.translate.message }}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem>
+                {action && viewButtonText && (
+                  <EuiButton size="s" onClick={onViewButton} fill={true} fullWidth={false}>
+                    <FormattedMessage
+                      id="xpack.securitySolution.trialNotifications.trialNotification.viewButton"
+                      defaultMessage="{viewButtonText}"
+                      values={{ viewButtonText }}
+                    />
+                  </EuiButton>
+                )}
+                <EuiSpacer size="m" />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiIcon type="empty" size="m" />
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiAccordion>
+      {showBottomBorder && trigger === 'open' && <EuiHorizontalRule margin="none" />}
     </>
   );
 };
@@ -189,7 +229,12 @@ export const YourTrialCompanion: React.FC<YourTrialCompanionProps> = ({
     '.euiAccordion__buttonContent': {
       width: '100%;',
     },
+    paddingTop: euiTheme.size.base,
+    paddingBottom: euiTheme.size.l,
   });
+  const firstLineSelected = expandedItemId === todoItems[0].milestoneId;
+  const lastLineSelected = expandedItemId === todoItems[todoItems.length - 1].milestoneId;
+
   const [isVisible, setIsVisible] = useState(true);
   const onDismissButton = () => {
     setIsVisible(false);
@@ -202,44 +247,49 @@ export const YourTrialCompanion: React.FC<YourTrialCompanionProps> = ({
       <EuiPanel css={styles}>
         <EuiAccordion
           id={accordionId}
-          buttonContent={buttonContent(completed.length, todoItems.length)}
+          buttonContent={buttonContent(completed.length, todoItems.length, euiTheme)}
+          buttonProps={{ css: css({ '&:hover': { 'text-decoration': 'none' } }) }}
+          arrowProps={{ css: css({ alignSelf: 'flex-start', marginTop: '0rem' }) }}
           arrowDisplay="right"
-          paddingSize="s"
+          paddingSize="none"
+          css={{
+            gap: euiTheme.size.m,
+          }}
           data-test-subj={GET_SET_UP_ACCORDION_TEST_ID}
+          element="fieldset"
         >
-          {todoItems.map((item) => {
-            return (
-              <YourTrialCompanionTODOItem
-                key={item.milestoneId}
-                item={item}
-                completed={completed}
-                setExpandedItemId={setExpandedItemId}
-                trigger={expandedItemId === item.milestoneId ? 'open' : 'closed'}
-              />
-            );
-          })}
+          <EuiSpacer size="l" />
+          <EuiHorizontalRule margin="none" />
+          <EuiSpacer size="l" />
+          <EuiFlexGroup alignItems={'center'} direction={'column'} css={{ gap: euiTheme.size.m }}>
+            {todoItems.map((item) => {
+              return (
+                <EuiFlexItem>
+                  <YourTrialCompanionTODOItem
+                    key={item.milestoneId}
+                    item={item}
+                    completed={completed}
+                    setExpandedItemId={setExpandedItemId}
+                    trigger={expandedItemId === item.milestoneId ? 'open' : 'closed'}
+                    showTopBorder={!firstLineSelected}
+                    showBottomBorder={!lastLineSelected}
+                  />
+                </EuiFlexItem>
+              );
+            })}
+          </EuiFlexGroup>
           {!showDismiss && (
-            <EuiFlexGroup alignItems={'center'} direction={'column'} justifyContent="spaceAround">
-              <EuiFlexItem grow={false}>
-                <EuiSpacer size="s" />
-                <EuiButtonEmpty
-                  size="xs"
-                  onClick={() => {
-                    setIsVisible(false);
-                  }}
-                >
+            <>
+              {!lastLineSelected && <EuiSpacer css={css({ blockSize: euiTheme.size.m })} />}
+              <EuiHorizontalRule margin="none" />
+              <EuiSpacer css={css({ blockSize: euiTheme.size.m })} />
+              <EuiFlexGroup alignItems={'center'} direction={'column'} gutterSize="s">
+                <EuiFlexItem>
                   <FormattedMessage
-                    id="xpack.securitySolution.trialNotifications.yourTrialCompanion.hideMe"
-                    defaultMessage="Hide Me"
+                    id="xpack.securitySolution.trialNotifications.yourTrialCompanion.dismiss.allStepsCompleted"
+                    defaultMessage="All steps complete!"
                   />
-                </EuiButtonEmpty>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          )}
-          {showDismiss && (
-            <>
-              <EuiHorizontalRule margin="xs" />
-              <EuiFlexGroup alignItems={'center'} direction={'column'}>
+                </EuiFlexItem>
                 <EuiFlexItem>
                   <EuiButton
                     fill={true}
diff --git a/x-pack/solutions/security/plugins/security_solution/public/trial_companion/trial_companion.tsx b/x-pack/solutions/security/plugins/security_solution/public/trial_companion/trial_companion.tsx
index 52a5560c99820..c6e01233341a0 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/trial_companion/trial_companion.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/trial_companion/trial_companion.tsx
@@ -9,7 +9,7 @@ import useInterval from 'react-use/lib/useInterval';
 
 import React, { useState } from 'react';
 import { difference } from 'lodash';
-import { YourTrialCompanion } from './nba_get_setup_panel';
+import YourTrialCompanion from './nba_get_setup_panel';
 import { useKibana } from '../common/lib/kibana';
 import { useGetNBA } from './hooks/use_get_nba';
 import { NBA_TODO_LIST } from './nba_translations';

From e13071066bc4e01a2f00d098c40596e149ffb556 Mon Sep 17 00:00:00 2001
From: Boris Ilyushonak <boris.ilyushonak@elastic.co>
Date: Thu, 29 Jan 2026 16:12:10 +0100
Subject: [PATCH 3/4] check types

---
 .../public/trial_companion/nba_get_setup_panel.stories.tsx      | 2 +-
 .../public/trial_companion/trial_companion.tsx                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/solutions/security/plugins/security_solution/public/trial_companion/nba_get_setup_panel.stories.tsx b/x-pack/solutions/security/plugins/security_solution/public/trial_companion/nba_get_setup_panel.stories.tsx
index abba7b9149344..0eb161c85f3e8 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/trial_companion/nba_get_setup_panel.stories.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/trial_companion/nba_get_setup_panel.stories.tsx
@@ -10,7 +10,7 @@ import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { NBA_TODO_LIST } from './nba_translations';
 import { Milestone } from '../../common/trial_companion/types';
 import type { YourTrialCompanionProps } from './nba_get_setup_panel';
-import YourTrialCompanion from './nba_get_setup_panel';
+import { YourTrialCompanion } from './nba_get_setup_panel';
 
 const meta: Meta<typeof YourTrialCompanion> = {
   component: YourTrialCompanion,
diff --git a/x-pack/solutions/security/plugins/security_solution/public/trial_companion/trial_companion.tsx b/x-pack/solutions/security/plugins/security_solution/public/trial_companion/trial_companion.tsx
index c6e01233341a0..52a5560c99820 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/trial_companion/trial_companion.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/trial_companion/trial_companion.tsx
@@ -9,7 +9,7 @@ import useInterval from 'react-use/lib/useInterval';
 
 import React, { useState } from 'react';
 import { difference } from 'lodash';
-import YourTrialCompanion from './nba_get_setup_panel';
+import { YourTrialCompanion } from './nba_get_setup_panel';
 import { useKibana } from '../common/lib/kibana';
 import { useGetNBA } from './hooks/use_get_nba';
 import { NBA_TODO_LIST } from './nba_translations';

From c137811424aac073d68fe378b319af9b3f94afc2 Mon Sep 17 00:00:00 2001
From: Boris Ilyushonak <boris.ilyushonak@elastic.co>
Date: Thu, 29 Jan 2026 16:43:26 +0100
Subject: [PATCH 4/4] good that we have tests

---
 .../public/trial_companion/nba_get_setup_panel.tsx        | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/x-pack/solutions/security/plugins/security_solution/public/trial_companion/nba_get_setup_panel.tsx b/x-pack/solutions/security/plugins/security_solution/public/trial_companion/nba_get_setup_panel.tsx
index 03e95b12d2682..dfb75d310b1c6 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/trial_companion/nba_get_setup_panel.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/trial_companion/nba_get_setup_panel.tsx
@@ -141,7 +141,7 @@ export const YourTrialCompanionTODOItem: React.FC<YourTrialCompanionTODOItemProp
       <EuiAccordion
         id={accordionId}
         buttonContent={itemButtonContent(iconType, color, item.translate.title, item.milestoneId)}
-        buttonProps={{ css: css({ '&:hover': { 'text-decoration': 'none' } }) }}
+        buttonProps={{ css: css({ '&:hover': { textDecoration: 'none' } }) }}
         arrowDisplay="right"
         onToggle={onToggle}
         forceState={trigger}
@@ -248,7 +248,7 @@ export const YourTrialCompanion: React.FC<YourTrialCompanionProps> = ({
         <EuiAccordion
           id={accordionId}
           buttonContent={buttonContent(completed.length, todoItems.length, euiTheme)}
-          buttonProps={{ css: css({ '&:hover': { 'text-decoration': 'none' } }) }}
+          buttonProps={{ css: css({ '&:hover': { textDecoration: 'none' } }) }}
           arrowProps={{ css: css({ alignSelf: 'flex-start', marginTop: '0rem' }) }}
           arrowDisplay="right"
           paddingSize="none"
@@ -264,7 +264,7 @@ export const YourTrialCompanion: React.FC<YourTrialCompanionProps> = ({
           <EuiFlexGroup alignItems={'center'} direction={'column'} css={{ gap: euiTheme.size.m }}>
             {todoItems.map((item) => {
               return (
-                <EuiFlexItem>
+                <EuiFlexItem key={item.milestoneId}>
                   <YourTrialCompanionTODOItem
                     key={item.milestoneId}
                     item={item}
@@ -278,7 +278,7 @@ export const YourTrialCompanion: React.FC<YourTrialCompanionProps> = ({
               );
             })}
           </EuiFlexGroup>
-          {!showDismiss && (
+          {showDismiss && (
             <>
               {!lastLineSelected && <EuiSpacer css={css({ blockSize: euiTheme.size.m })} />}
               <EuiHorizontalRule margin="none" />