Panel styles

Author: ryankeairns

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

@@ -115,8 +115,14 @@ export interface AttachmentUIDefinition<TAttachment extends UnknownAttachment =
   getLabel: (attachment: TAttachment) => string;
   /**
    * Returns the icon type to display for the attachment.
+   * When provided, the icon is rendered in the inline attachment header alongside the title.
    */
   getIcon?: () => IconType;
+  /**
+   * Optional badge or content rendered below the title in the inline attachment header.
+   * Use for status indicators such as Draft/Created state.
+   */
+  getHeaderBadge?: (attachment: TAttachment) => ReactNode;
   /**
    * Optional custom click handler for attachment pills.
    * When provided, pills will invoke this instead of the default behavior.

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

@@ -6,15 +6,18 @@
  */
 
 import React from 'react';
+import type { ReactNode } from 'react';
 import {
   EuiBadge,
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiIcon,
   EuiSplitPanel,
-  EuiText,
+  EuiTitle,
   useEuiTheme,
 } from '@elastic/eui';
+import type { IconType } from '@elastic/eui';
 import { css } from '@emotion/react';
 import type { ActionButton } from '@kbn/agent-builder-browser/attachments';
 import { i18n } from '@kbn/i18n';
@@ -39,6 +42,10 @@ export const HEADER_HEIGHT = 72;
 
 interface AttachmentHeaderProps {
   title: string;
+  /** Optional icon rendered to the left of the title, sized to span title + badge height. */
+  icon?: IconType;
+  /** Optional badge or content rendered below the title, inside the header. */
+  headerBadge?: ReactNode;
   actionButtons?: ActionButton[];
   onClose?: () => void;
   /**
@@ -52,19 +59,14 @@ interface AttachmentHeaderProps {
 
 export const AttachmentHeader: React.FC<AttachmentHeaderProps> = ({
   title,
+  icon,
+  headerBadge,
   actionButtons,
   onClose,
   previewBadgeState = 'none',
 }) => {
   const { euiTheme } = useEuiTheme();
 
-  const textStyles = css`
-    font-weight: ${euiTheme.font.weight.semiBold};
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  `;
-
   const headerStyles = css`
     position: relative;
     display: flex;
@@ -82,7 +84,17 @@ export const AttachmentHeader: React.FC<AttachmentHeaderProps> = ({
     z-index: ${euiTheme.levels.content};
   `;
 
-  if (!actionButtons || actionButtons.length === 0) {
+  const iconContainerStyles = css`
+    border-right: ${euiTheme.border.thin};
+    padding: ${euiTheme.size.m};
+    padding-left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  `;
+
+  if (!actionButtons?.length && !icon && !headerBadge) {
     return null;
   }
 
@@ -98,17 +110,36 @@ export const AttachmentHeader: React.FC<AttachmentHeaderProps> = ({
         justifyContent="spaceBetween"
         alignItems="center"
         style={{ width: '100%' }}
+        gutterSize="s"
       >
+        {icon && (
+          <EuiFlexItem grow={false}>
+            <div css={iconContainerStyles}>
+              <EuiIcon type={icon} size="l" color="subdued" aria-hidden={true} />
+            </div>
+          </EuiFlexItem>
+        )}
         <EuiFlexItem grow={true} style={{ minWidth: 0 }}>
-          <EuiText css={textStyles} size="s">
-            {title}
-          </EuiText>
+          <EuiFlexGroup
+            direction="column"
+            gutterSize="xs"
+            alignItems="flexStart"
+            responsive={false}
+          >
+            <EuiFlexItem grow={false}>
+              <EuiTitle size="xs">
+                {/* h3 would be semantically preferred, but browser UA styles override EuiTitle's size prop here; h5 native size is close enough to xs that it doesn't. */}
+                <h5>{title}</h5>
+              </EuiTitle>
+            </EuiFlexItem>
+            {headerBadge && <EuiFlexItem grow={false}>{headerBadge}</EuiFlexItem>}
+          </EuiFlexGroup>
         </EuiFlexItem>
-        {previewBadgeState !== 'previewing' && (
+        {previewBadgeState !== 'previewing' && actionButtons?.length ? (
           <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
             <AttachmentActions buttons={actionButtons} />
           </EuiFlexItem>
-        )}
+        ) : null}
         {previewBadgeState === 'previewing' && (
           <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
             <EuiBadge iconType="eye" color="success">

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

@@ -115,6 +115,8 @@ export const InlineAttachmentWithActions: React.FC<InlineAttachmentWithActionsPr
   }
 
   const title = uiDefinition?.getLabel?.(attachment) ?? attachment.type.toUpperCase();
+  const icon = uiDefinition?.getIcon?.();
+  const headerBadge = uiDefinition?.getHeaderBadge?.(attachment);
 
   return (
     <EuiSplitPanel.Outer
@@ -127,6 +129,8 @@ export const InlineAttachmentWithActions: React.FC<InlineAttachmentWithActionsPr
     >
       <AttachmentHeader
         title={title}
+        icon={icon}
+        headerBadge={headerBadge}
         actionButtons={inlineActionButtons}
         previewBadgeState={resolvedPreviewBadgeState}
       />

x-pack/platform/plugins/shared/agent_builder_platform/common/attachments/skill_draft.ts

@@ -26,13 +26,6 @@ export const SKILL_DRAFT_ATTACHMENT_TYPE = 'skill_draft' as const;
  * Mirrors `PersistedSkillCreateRequest` exactly so the same draft can be
  * shipped straight to the create endpoint without remapping. Keep this in
  * sync with `skillCreateRequestSchema` from `@kbn/agent-builder-common`.
- *
- * `is_latest` is set to `true` by `propose_skill` and maintained by
- * `patch_skill_draft`. It drives the "Latest" / "Outdated" badge on the card,
- * signalling to the user which draft card in the conversation thread is
- * current. When the architecture shifts to creating a new attachment per patch
- * (rather than mutating in-place), the previous attachment's `is_latest` will
- * be set to `false` server-side, making the Outdated state fully automatic.
  */
 export interface SkillDraftAttachmentData {
   id: string;
@@ -41,8 +34,6 @@ export interface SkillDraftAttachmentData {
   content: string;
   tool_ids: string[];
   referenced_content?: SkillReferencedContent[];
-  /** Whether this is the most recent draft in the conversation thread. */
-  is_latest?: boolean;
 }
 
 export type SkillDraftAttachment = Attachment<