[Agent Builder] Decrease base font sizes in chat UI. (elastic#283254)

## Summary
Tighten Agent Builder chat typography and spacing so the conversation UI
feels more consistent with the rest of Kibana.

## Changes
- Reduce chat message and markdown text from `m` to `s`
- Reduce composer/editor font size from `m` to `s`
- Shrink conversation header height (`88` → `64`) and more-actions
button size (`m` → `s`)
- Use smaller control sizes for input popover buttons and round metadata
trigger (`xs`)
- Tighten round response/input spacing and padding
- Align thinking/tool-call step layout, expansion chevrons, and copy
(drop trailing periods)
- Simplify to-dos header and adjust its padding/type size
- fix: Use canvas-specific attachment header radius (`0 4px 0 0`)
- fix: Remove sidebar right border; minor connector selector and
new-conversation prompt tweaks

##### Screenshots

<img width="3172" height="1930" alt="CleanShot 2026-08-06 at 10 58
26@2x"
src="https://github.com/user-attachments/assets/62b87ff8-580b-4d12-abba-6bd3326acd45"
/>

<img width="3172" height="1930" alt="CleanShot 2026-08-06 at 10 57
47@2x"
src="https://github.com/user-attachments/assets/b41de9dc-97d4-4a85-91cf-25625588eca4"
/>

<img width="3172" height="1930" alt="CleanShot 2026-08-06 at 11 00
02@2x"
src="https://github.com/user-attachments/assets/943e7575-52af-44fc-b272-3c5aeed7ea73"
/>

<img width="3172" height="1930" alt="CleanShot 2026-08-06 at 11 16
05@2x"
src="https://github.com/user-attachments/assets/051923cb-aa53-42eb-8188-5a5c9e5265df"
/>


### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/docs/extend/kibana/contributing/workflow/how-we-use-github#release-notes)
- [ ] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [ ] [See some risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)
- [ ] ...

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

Author: 3 people

x-pack/platform/packages/shared/agent-builder/agent-builder-browser/conversation_input_shell/conversation_input_shell.tsx

@@ -45,7 +45,7 @@ export const ConversationInputShell = React.forwardRef<
       ? euiTheme.colors.backgroundBaseDisabled
       : euiTheme.colors.backgroundBasePlain};
     min-height: ${isCollapsed ? '0' : INPUT_MIN_HEIGHT};
-    padding: ${euiTheme.size.base} ${euiTheme.size.base} ${euiTheme.size.s} ${euiTheme.size.base};
+    padding: ${euiTheme.size.base};
     display: flex;
     flex-direction: column;
     gap: ${euiTheme.size.s};

x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation.styles.ts

@@ -8,7 +8,7 @@
 import { css } from '@emotion/react';
 import type { EuiThemeComputed } from '@elastic/eui';
 
-export const headerHeight = 88;
+export const headerHeight = 64;
 
 const maxConversationWidthStyles = css`
   max-width: 800px;

x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_header/more_actions_button.tsx

@@ -10,7 +10,6 @@ import {
   EuiButtonIcon,
   EuiPopover,
   EuiContextMenuPanel,
-  EuiSpacer,
   EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -289,7 +288,7 @@ export const MoreActionsButton: React.FC<MoreActionsButtonProps> = ({ onCloseSid
   const buttonProps = {
     iconType: 'boxesVertical' as const,
     color: 'text' as const,
-    size: 'm' as const,
+    size: 's' as const,
     'aria-label': fullscreenLabels.actionsAriaLabel,
     onClick: togglePopover,
     'data-test-subj': 'agentBuilderMoreActionsButton',
@@ -306,12 +305,11 @@ export const MoreActionsButton: React.FC<MoreActionsButtonProps> = ({ onCloseSid
         button={<EuiButtonIcon {...buttonProps} />}
         isOpen={isPopoverOpen}
         closePopover={closePopover}
-        panelPaddingSize="xs"
-        anchorPosition="downCenter"
+        panelPaddingSize="none"
+        anchorPosition="downRight"
         aria-label={fullscreenLabels.actionsAriaLabel}
       >
         <EuiContextMenuPanel items={menuItems} />
-        <EuiSpacer size="s" />
       </EuiPopover>
     </>
   );

x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_input/input_actions/connector_selector/connector_selector.tsx

@@ -8,7 +8,7 @@
 import type { EuiSelectableOption } from '@elastic/eui';
 import {
   EuiBadge,
-  EuiButtonEmpty,
+  EuiButton,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPopover,
@@ -142,28 +142,36 @@ const manageConnectorsAriaLabel = i18n.translate(
 const ConnectorListFooter: React.FC = () => {
   const { manageConnectorsUrl } = useNavigation();
   const { write: hasWritePrivilege } = useUiPrivileges();
+  const manageButtonProps = {
+    size: 's' as const,
+    iconType: 'gear',
+    color: 'text' as const,
+    'aria-label': manageConnectorsAriaLabel,
+    ...getEbtProps({
+      element: AGENT_BUILDER_UI_EBT.element.pageContent,
+      action: AGENT_BUILDER_UI_EBT.action.conversation.MANAGE_CONNECTORS,
+      detail: 'connector',
+    }),
+  };
   return (
     <EuiPopoverFooter paddingSize="s">
       <EuiFlexGroup responsive={false} justifyContent="spaceBetween" gutterSize="s">
         <EuiFlexItem>
-          <EuiButtonEmpty
-            size="s"
-            iconType="gear"
-            color="text"
-            aria-label={manageConnectorsAriaLabel}
-            href={manageConnectorsUrl}
-            disabled={!hasWritePrivilege}
-            {...getEbtProps({
-              element: AGENT_BUILDER_UI_EBT.element.pageContent,
-              action: AGENT_BUILDER_UI_EBT.action.conversation.MANAGE_CONNECTORS,
-              detail: 'connector',
-            })}
-          >
-            <FormattedMessage
-              id="xpack.agentBuilder.conversationInput.agentSelector.manageAgents"
-              defaultMessage="Manage"
-            />
-          </EuiButtonEmpty>
+          {hasWritePrivilege ? (
+            <EuiButton {...manageButtonProps} href={manageConnectorsUrl}>
+              <FormattedMessage
+                id="xpack.agentBuilder.conversationInput.agentSelector.manageAgents"
+                defaultMessage="Manage"
+              />
+            </EuiButton>
+          ) : (
+            <EuiButton {...manageButtonProps} disabled>
+              <FormattedMessage
+                id="xpack.agentBuilder.conversationInput.agentSelector.manageAgents"
+                defaultMessage="Manage"
+              />
+            </EuiButton>
+          )}
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPopoverFooter>
@@ -344,7 +352,7 @@ export const ConnectorSelector: React.FC<{}> = () => {
       isOpen={isPopoverOpen}
       closePopover={closePopover}
       panelPaddingSize="none"
-      anchorPosition="upCenter"
+      anchorPosition="upLeft"
     >
       <EuiSelectable
         id={connectorSelectId}

x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_input/input_actions/input_popover_button.tsx

@@ -47,6 +47,7 @@ export const InputPopoverButton: React.FC<
     <EuiButtonEmpty
       css={[truncateStyles, open && openStyles]}
       color="text"
+      size="xs"
       iconSide="left"
       flush="both"
       iconType={iconType}

x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_input/message_editor/message_editor.tsx

@@ -143,7 +143,7 @@ export const MessageEditor: React.FC<MessageEditorProps> = ({
     }
   `;
   const fontStyles = css`
-    ${useEuiFontSize('m')}
+    ${useEuiFontSize('s')}
   `;
   const commandBadgeStyles = css`
     [${COMMAND_BADGE_ATTRIBUTE}] {

x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_rounds/round_events/round_events.tsx

@@ -39,9 +39,9 @@ export const RoundEvents: React.FC<RoundEventsProps> = ({
   const displayItems = groupSteps(steps);
 
   return (
-    <EuiFlexGroup direction="column" gutterSize="s" data-test-subj="agentBuilderThinkingPanel">
+    <EuiFlexGroup direction="column" data-test-subj="agentBuilderThinkingPanel">
       <EuiFlexItem grow={false}>
-        <EuiFlexGroup direction="column" gutterSize="s">
+        <EuiFlexGroup gutterSize="l" direction="column">
           {displayItems.map((item) => {
             if (item.kind === 'group') {
               return (
@@ -67,7 +67,7 @@ export const RoundEvents: React.FC<RoundEventsProps> = ({
             );
           })}
         </EuiFlexGroup>
-        <EuiSpacer size="xs" />
+        <EuiSpacer size="s" />
       </EuiFlexItem>
     </EuiFlexGroup>
   );

x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_rounds/round_events/step_layout.tsx

@@ -55,7 +55,7 @@ export const StepLayout: React.FC<StepLayoutProps> = ({
     <div>
       <EuiFlexGroup
         direction="row"
-        gutterSize="s"
+        gutterSize="xs"
         alignItems="center"
         responsive={false}
         css={rowStyles}
@@ -84,7 +84,7 @@ export const StepLayout: React.FC<StepLayoutProps> = ({
         {isClickable && isExpandable && (
           <EuiFlexItem grow={false}>
             <EuiIcon
-              type={isExpanded ? 'arrowUp' : 'arrowDown'}
+              type={isExpanded ? 'chevronSingleDown' : 'chevronSingleRight'}
               color={euiTheme.colors.textDisabled}
               size="s"
               aria-hidden={true}

x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_rounds/round_events/steps/tool_call_group.test.tsx

@@ -32,7 +32,7 @@ const toolStep = (id: string, toolId: string, results: ToolResult[] = []) =>
   createToolCallStep({ tool_call_id: id, tool_id: toolId, params: {}, results });
 
 describe('ToolCallGroup', () => {
-  it('shows "N tools ran." once every step in the group has a result', () => {
+  it('shows "N tools ran" once every step in the group has a result', () => {
     renderWithProviders(
       <ToolCallGroup
         steps={[
@@ -42,7 +42,7 @@ describe('ToolCallGroup', () => {
         ]}
       />
     );
-    expect(screen.getByText('3 tools ran.')).toBeInTheDocument();
+    expect(screen.getByText('3 tools ran')).toBeInTheDocument();
   });
 
   it('shows "N tools running…" while at least one step is still in progress', () => {
@@ -64,15 +64,16 @@ describe('ToolCallGroup', () => {
         ]}
       />
     );
-    await user.click(screen.getByText('2 tools ran.'));
+    await user.click(screen.getByText('2 tools ran'));
     const childStatuses = screen
       .getAllByRole('status')
-      .filter((el) => el.textContent !== '2 tools ran.');
+      .filter((el) => el.textContent !== '2 tools ran');
     expect(childStatuses.map((el) => el.querySelector('.euiBadge')?.textContent)).toEqual([
       'tool: search',
       'tool: read',
     ]);
-    expect(childStatuses.every((el) => el.textContent?.includes('ran.'))).toBe(true);
+    // textContent concatenates badge + suffix without a space (e.g. "tool: searchran")
+    expect(childStatuses.every((el) => /ran$/.test(el.textContent ?? ''))).toBe(true);
 
     await user.click(screen.getAllByRole('button')[1]);
     expect(screen.getByRole('dialog')).toBeInTheDocument();

x-pack/platform/plugins/shared/agent_builder/public/application/components/conversations/conversation_rounds/round_events/steps/tool_call_group.tsx

@@ -6,8 +6,7 @@
  */
 
 import React, { useState } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiText, useEuiTheme } from '@elastic/eui';
-import { css } from '@emotion/react';
+import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { AGENT_BUILDER_UI_EBT } from '@kbn/agent-builder-common';
 import { isErrorResult } from '@kbn/agent-builder-common/tools/tool_result';
@@ -20,7 +19,6 @@ interface ToolCallGroupProps {
 }
 
 export const ToolCallGroup: React.FC<ToolCallGroupProps> = ({ steps }) => {
-  const { euiTheme } = useEuiTheme();
   const [isExpanded, setIsExpanded] = useState(false);
   const onToggle = () => setIsExpanded((v) => !v);
 
@@ -33,7 +31,7 @@ export const ToolCallGroup: React.FC<ToolCallGroupProps> = ({ steps }) => {
         {allRan ? (
           <FormattedMessage
             id="xpack.agentBuilder.roundEvents.toolCallGroup.ran"
-            defaultMessage="{count, plural, one {# tool ran.} other {# tools ran.}}"
+            defaultMessage="{count, plural, one {# tool ran} other {# tools ran}}"
             values={{ count: steps.length }}
           />
         ) : (
@@ -47,26 +45,20 @@ export const ToolCallGroup: React.FC<ToolCallGroupProps> = ({ steps }) => {
     </EuiText>
   );
 
-  const expansionStyles = css`
-    padding-left: ${euiTheme.size.s};
-  `;
-
   return (
     <div data-test-subj="agentBuilderToolCallGroup">
       <StepLayout
         label={label}
         onClick={onToggle}
         isExpanded={isExpanded}
         expansion={
-          <div css={expansionStyles}>
-            <EuiFlexGroup direction="column" gutterSize="s">
-              {steps.map((step) => (
-                <EuiFlexItem grow={false} key={step.tool_call_id}>
-                  <ToolCallStep step={step} />
-                </EuiFlexItem>
-              ))}
-            </EuiFlexGroup>
-          </div>
+          <EuiFlexGroup direction="column" gutterSize="s">
+            {steps.map((step) => (
+              <EuiFlexItem grow={false} key={step.tool_call_id}>
+                <ToolCallStep step={step} />
+              </EuiFlexItem>
+            ))}
+          </EuiFlexGroup>
         }
         ebtAction={AGENT_BUILDER_UI_EBT.action.conversation.EXPAND_TOOL_CALL_GROUP}
       />