@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/src/components/chat/chat-input.tsx

@@ -17,6 +17,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { cn } from '../../utils/cn';
 import { Send01Icon, StopCircleIcon } from '../icons-v2-generated';
 import { AvatarStack } from '../ui/avatar-stack';
+import { Button } from '../ui/button';
 import { Tag } from '../ui/tag';
 import { ChatTypingIndicator } from './chat-typing-indicator';
 import { SlashCommandSuggestions } from './slash-command-suggestions';
@@ -744,26 +745,17 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
               />
             </div>
 
-            <button
+            <Button
+              variant="transparent"
+              size="icon-sm"
               type="button"
               aria-label={isStopMode ? 'Stop generation' : 'Send message'}
               onClick={isStopMode ? handleStop : handleSubmit}
               disabled={isStopMode ? isStopping : sendDisabled}
-              className={cn(
-                'flex h-6 shrink-0 items-center text-ods-text-secondary transition-colors duration-200',
-                // Focus accent applies to the SEND icon only. Stop stays neutral
-                // regardless of where focus sits — otherwise it reads yellow after
-                // an Enter-send (editor keeps focus) but gray after an approve
-                // click (focus moved to the card button).
-                focused && !isStopMode && 'text-ods-accent',
-                '[&_svg]:size-4 md:[&_svg]:size-6',
-                'cursor-pointer hover:text-ods-text-primary',
-                'focus-visible:text-ods-accent focus-visible:outline-none',
-                'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-ods-text-secondary',
-              )}
+              className="shrink-0"
             >
               {isStopMode ? <StopCircleIcon size={20} /> : <Send01Icon size={20} />}
-            </button>
+            </Button>
           </div>
         </div>
       )}

package/src/components/chat/chat-message-enhanced.tsx

@@ -15,6 +15,16 @@ import { ApprovalRequestMessage } from './approval-request-message';
 import { AskDisplay } from './ask-display';
 import { ChatAppearanceContext, useChatAppearance } from './chat-appearance-context';
 import { ChatContextChipStrip } from './chat-context-picker';
+import {
+  CHAT_MESSAGE_FACE_PX,
+  CHAT_MESSAGE_HEADER_CLASS,
+  CHAT_MESSAGE_ROW_PADDING_CLASS,
+  CHAT_MESSAGE_SEGMENTS_CLASS,
+  CHAT_MESSAGE_STACK_CLASS,
+  CHAT_MESSAGE_TEXT_CLASS,
+  CHAT_MESSAGE_USER_BUBBLE_CLASS,
+  CHAT_MESSAGE_USER_ROW_CLASS,
+} from './chat-message-layout';
 import type { ChatRef } from './chat-ref.types';
 import { ContextCompactionDisplay } from './context-compaction-display';
 import { BlockCard, type BlockCardProps } from './entity-cards/block-card';
@@ -103,6 +113,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
       appearance: appearanceProp,
       authorType: authorTypeProp,
       selfAuthorType,
+      nameEveryTurn = false,
       assistantIcon,
       contextItems,
       resolveContextIcon,
@@ -535,9 +546,15 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
     // system line and another person answering (a technician in the end
     // user's thread). Mingo sends the admin's own turns as `admin` too; those
     // are the user's words and draw as such. Every face carries its name for
-    // assistive tech and on hover.
-    const showName = isSystem || isOtherPerson || (authorType === 'admin' && !isUser);
+    // assistive tech and on hover. A thread of several parties names every
+    // turn (`nameEveryTurn`: a ticket, where an end user, the agent and any
+    // number of technicians write): the agent's turn as an incoming one, the
+    // viewer's own bubble with the name beside the face, on the bubble's side.
+    const showName =
+      isSystem || isOtherPerson || (authorType === 'admin' && !isUser) || (nameEveryTurn && role === 'assistant');
+    const showSelfName = nameEveryTurn && isUser && !isSystem;
     const displayName = name || (isHuman ? 'User' : assistantType === 'mingo' ? 'Mingo' : 'Fae');
+    const nameLabel = <span className="min-w-0 truncate text-ods-open-yellow text-h6">{displayName}</span>;
     const faceBox = 'h-5 w-5 flex-shrink-0';
     const face: ReactNode =
       !showAvatar || isSystem ? null : !isHuman && !avatar && assistantIcon ? (
@@ -557,7 +574,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
             fallback={displayName}
             variant="round"
             size="xs"
-            sizePx={20}
+            sizePx={CHAT_MESSAGE_FACE_PX}
             initialsClassName="text-[9px] text-ods-text-secondary"
           />
         </span>
@@ -567,7 +584,11 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
     // receipt card rather than as an author row with no body.
     if (isV2 && isSystem && name) {
       return (
-        <div ref={ref} className={cn('relative py-[calc(var(--spacing-system-m)/2)]', className)} {...props}>
+        <div
+          ref={ref}
+          className={cn('relative', CHAT_MESSAGE_ROW_PADDING_CLASS[CHAT_APPEARANCE.V2], className)}
+          {...props}
+        >
           <ChatAppearanceContext.Provider value={appearance}>
             <SystemEventMessage text={name} timestamp={timestamp} />
           </ChatAppearanceContext.Provider>
@@ -581,9 +602,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
           ref={ref}
           className={cn(
             'relative',
-            // v2 spaces messages 16px apart (spacing-system-m), split across the
-            // two neighbours' padding so blocks outside a row keep the rhythm.
-            isV2 ? 'py-[calc(var(--spacing-system-m)/2)]' : 'py-[var(--spacing-system-s)]',
+            CHAT_MESSAGE_ROW_PADDING_CLASS[isV2 ? CHAT_APPEARANCE.V2 : CHAT_APPEARANCE.CLASSIC],
             className,
           )}
           {...props}
@@ -602,11 +621,12 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
             layout per drawer-resize frame in Safari / the desktop WKWebView
             vs ~9ms as grid (Chrome: ~2ms either way). Same gap and stretch,
             no margin collapsing — visually identical. */}
-          <div className="grid min-w-0 grid-cols-1 gap-[var(--spacing-system-xxs)]">
-            {(face || showName) && (
-              <div className={cn('flex items-center gap-[var(--spacing-system-xs)]', isUser && 'justify-end')}>
+          <div className={CHAT_MESSAGE_STACK_CLASS}>
+            {(face || showName || showSelfName) && (
+              <div className={cn(CHAT_MESSAGE_HEADER_CLASS, isUser && 'justify-end')}>
+                {showSelfName && nameLabel}
                 {face}
-                {showName && <span className="min-w-0 truncate text-ods-open-yellow text-h6">{displayName}</span>}
+                {showName && nameLabel}
                 {showName && timestamp && (
                   <span className="ml-auto shrink-0 whitespace-nowrap text-ods-text-secondary text-h6">
                     {formatMessageTimestamp(timestamp)}
@@ -617,7 +637,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
 
             {/* Message segments — hidden for system messages without content */}
             {(!isSystem || segments.length > 0) && (
-              <div className="grid grid-cols-1 gap-2">
+              <div className={CHAT_MESSAGE_SEGMENTS_CLASS}>
                 {segments.map((segment, index) => {
                   // The engine's streaming path (atomic-block memoization +
                   // fence tail-completion + aria-live) applies ONLY to the
@@ -633,8 +653,8 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
                     // speaker's face is the short line above).
                     if (isUser) {
                       return (
-                        <div key={index} className="flex min-w-0 justify-end">
-                          <div className="min-w-0 max-w-[85%] break-words rounded-xl bg-ods-bg-active px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] text-ods-text-primary text-h4">
+                        <div key={index} className={CHAT_MESSAGE_USER_ROW_CLASS}>
+                          <div className={CHAT_MESSAGE_USER_BUBBLE_CLASS}>
                             {renderSegmentBody(index, segment.text, segmentIsStreaming)}
                           </div>
                         </div>
@@ -643,10 +663,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
                     return (
                       <div
                         key={index}
-                        className={cn(
-                          'w-full min-w-0 break-words text-h4',
-                          isError ? 'text-ods-error' : 'text-ods-text-primary',
-                        )}
+                        className={cn(CHAT_MESSAGE_TEXT_CLASS, isError ? 'text-ods-error' : 'text-ods-text-primary')}
                       >
                         {renderSegmentBody(index, segment.text, segmentIsStreaming)}
                       </div>
@@ -765,6 +782,7 @@ const MemoizedChatMessageEnhanced = memo(ChatMessageEnhanced, (prevProps, nextPr
     prevProps.appearance === nextProps.appearance &&
     prevProps.authorType === nextProps.authorType &&
     prevProps.selfAuthorType === nextProps.selfAuthorType &&
+    prevProps.nameEveryTurn === nextProps.nameEveryTurn &&
     prevProps.assistantIcon === nextProps.assistantIcon &&
     prevProps.className === nextProps.className &&
     // Reference equality — the host re-uses the same array instance per

package/src/components/chat/chat-message-layout.ts

@@ -0,0 +1,39 @@
+import { CHAT_APPEARANCE } from './types/chat.types';
+
+/**
+ * A message row's layout, read by the row and by its skeleton (`ChatMessageSkeleton`), so the two are one box.
+ * The row's vertical rhythm per appearance: v2 spaces messages 16px apart (spacing-system-m), split across the two
+ * neighbours' padding so blocks outside a row keep the rhythm.
+ */
+export const CHAT_MESSAGE_ROW_PADDING_CLASS = {
+  [CHAT_APPEARANCE.CLASSIC]: 'py-[var(--spacing-system-s)]',
+  [CHAT_APPEARANCE.V2]: 'py-[calc(var(--spacing-system-m)/2)]',
+} as const;
+/** The row's single column: the face line, then the segments. */
+export const CHAT_MESSAGE_STACK_CLASS = 'grid min-w-0 grid-cols-1 gap-[var(--spacing-system-xxs)]';
+/** The face line above a message (the face, the name and time where they are written). */
+export const CHAT_MESSAGE_HEADER_CLASS = 'flex items-center gap-[var(--spacing-system-xs)]';
+/** The segments of a message. */
+export const CHAT_MESSAGE_SEGMENTS_CLASS = 'grid grid-cols-1 gap-2';
+/** The row holding the user's own bubble, at the right. */
+export const CHAT_MESSAGE_USER_ROW_CLASS = 'flex min-w-0 justify-end';
+/** What the user said: a bubble on the right. */
+export const CHAT_MESSAGE_USER_BUBBLE_CLASS =
+  'min-w-0 max-w-[85%] break-words rounded-xl bg-ods-bg-active px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] text-ods-text-primary text-h4';
+/** What anyone else says: plain text across the thread's width. */
+export const CHAT_MESSAGE_TEXT_CLASS = 'w-full min-w-0 break-words text-h4';
+/** The speaker's face, in px (a round picture, an agent's mark). */
+export const CHAT_MESSAGE_FACE_PX = 20;
+
+/** The thread's scroller, read by `ChatMessageList` and by its skeleton. */
+export const CHAT_MESSAGE_LIST_SCROLLER_CLASS = 'flex h-full w-full flex-1 flex-col overflow-y-auto overflow-x-hidden';
+/** The thread's thin scrollbar. */
+export const CHAT_MESSAGE_LIST_SCROLLBAR_CLASS =
+  'scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30';
+/** The thread's column: the panel's full width (`full`) or the centred narrow column (`narrow`). */
+export const CHAT_MESSAGE_LIST_COLUMN_CLASS = {
+  full: 'flex w-full min-w-0 flex-col pb-[var(--spacing-system-xs)]',
+  narrow: 'mx-auto flex w-full min-w-0 max-w-ods-content-narrow flex-col pb-[var(--spacing-system-xs)]',
+} as const;
+/** The column's side padding when the host gives none. */
+export const CHAT_MESSAGE_LIST_CONTENT_PADDING_CLASS = 'px-[var(--spacing-system-m)]';

package/src/components/chat/chat-message-list.tsx

@@ -13,10 +13,18 @@ import {
 import { useStickToBottom } from 'use-stick-to-bottom';
 import { cn } from '../../utils/cn';
 import { DotsLoaderIcon, Arrow02DownIcon } from '../icons-v2-generated';
+import { Button } from '../ui/button';
+import { useLoadingScope } from '../ui/loading-scope';
 import { OverlayOpenRegistryProvider } from '../ui/overlay-open-registry';
 import { ChatAppearanceContext } from './chat-appearance-context';
 import { ChatMessageEnhanced } from './chat-message-enhanced';
-import { ChatMessageListSkeleton } from './chat-message-skeleton';
+import {
+  CHAT_MESSAGE_LIST_COLUMN_CLASS,
+  CHAT_MESSAGE_LIST_CONTENT_PADDING_CLASS,
+  CHAT_MESSAGE_LIST_SCROLLBAR_CLASS,
+  CHAT_MESSAGE_LIST_SCROLLER_CLASS,
+} from './chat-message-layout';
+import { CHAT_MESSAGE_LIST_SKELETON_MESSAGES, ChatMessageListSkeleton } from './chat-message-skeleton';
 import { CyclingPhrase } from './cycling-phrase';
 import type { ChatMessageListProps } from './types';
 import { CHAT_APPEARANCE } from './types/chat.types';
@@ -129,7 +137,9 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
       className,
       messages,
       dialogId,
-      isLoading = false,
+      isLoading: isLoadingProp = false,
+      pageSize = CHAT_MESSAGE_LIST_SKELETON_MESSAGES,
+      fill = false,
       isTyping = false,
       typingMessage,
       autoScroll = true,
@@ -141,6 +151,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
       assistantType,
       approvalVariant,
       selfAuthorType,
+      nameEveryTurn,
       appearance = CHAT_APPEARANCE.CLASSIC,
       assistantIcon,
       pendingApprovals,
@@ -158,6 +169,10 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
     },
     ref,
   ) => {
+    // ONE switch: in a page's loading state (or while the host reads the thread) the list is its skeleton. Every
+    // effect below keys on `isLoading`, so the switch is resolved before any of them.
+    const isLoading = useLoadingScope() || isLoadingProp;
+
     // ---- Library: useStickToBottom -----------------------------------
     // `resize: 'smooth'` — during streaming, content grows token-by-
     // token; library uses spring physics to follow the bottom for a
@@ -936,7 +951,10 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
           showAvatars={showAvatars}
           fullWidth={fullWidth}
           contentClassName={contentClassName}
-          messageCount={6}
+          fill={fill}
+          messageCount={pageSize}
+          appearance={appearance}
+          namedOthers={selfAuthorType === 'admin'}
         />
       );
     }
@@ -974,7 +992,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
               <div
                 ref={setScrollRef}
                 className={cn(
-                  'flex h-full w-full flex-1 flex-col overflow-y-auto overflow-x-hidden',
+                  CHAT_MESSAGE_LIST_SCROLLER_CLASS,
                   // `overscroll-contain` (default ON, opt-out via `overscrollContain={false}`):
                   // reaching the top/bottom of the thread must NOT chain the wheel/
                   // touch scroll to the page behind the chat — e.g. the company-hub
@@ -984,7 +1002,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
                   // the surrounding page keeps scrolling normally when the pointer is
                   // over the (non-interactive) thread.
                   overscrollContain && 'overscroll-contain',
-                  'scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30',
+                  CHAT_MESSAGE_LIST_SCROLLBAR_CLASS,
                   className,
                 )}
                 {...props}
@@ -995,10 +1013,8 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
                     // `fullWidth=true` drops the centered-narrow column for
                     // side-panel hosts (e.g. multi-platform-hub Mingo). Same
                     // semantics as ChatHeader / ChatInput / ChatFooter.
-                    fullWidth
-                      ? 'flex w-full min-w-0 flex-col pb-[var(--spacing-system-xs)]'
-                      : 'mx-auto flex w-full min-w-0 max-w-ods-content-narrow flex-col pb-[var(--spacing-system-xs)]',
-                    contentClassName ?? 'px-[var(--spacing-system-m)]',
+                    CHAT_MESSAGE_LIST_COLUMN_CLASS[fullWidth ? 'full' : 'narrow'],
+                    contentClassName ?? CHAT_MESSAGE_LIST_CONTENT_PADDING_CLASS,
                   )}
                   style={{ minHeight: '100%' }}
                 >
@@ -1049,6 +1065,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
                         approvalVariant={approvalVariant}
                         authorType={message.authorType}
                         selfAuthorType={selfAuthorType}
+                        nameEveryTurn={nameEveryTurn}
                         assistantIcon={message.role !== 'user' ? assistantIcon : undefined}
                         contextItems={message.contextItems}
                         resolveContextIcon={resolveContextIcon}
@@ -1058,6 +1075,9 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
                         refs={message.refs}
                         onAskSelect={index > lastUserMessageIndex ? onAskSelect : undefined}
                         NavLinkAnchor={NavLinkAnchor}
+                        // One message of a read thread (the height gate counts them); the wrapper carries it instead
+                        // when the row has content of its own below it.
+                        data-loading-item={ownedContent ? undefined : ''}
                       />
                     );
                     // Only wrap when there IS owned content: the bare row keeps
@@ -1065,7 +1085,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
                     // thread without any stays byte-identical to before.
                     if (!ownedContent) return row;
                     return (
-                      <div key={message.id} className="grid w-full min-w-0 grid-cols-1">
+                      <div key={message.id} className="grid w-full min-w-0 grid-cols-1" data-loading-item>
                         {row}
                         {ownedContent}
                       </div>
@@ -1086,7 +1106,9 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
               move the very bottom it points at. Hidden while at the bottom
               and in passive demo hosts. */}
               {autoScroll && !atBottom && messages.length > 0 && (
-                <button
+                <Button
+                  variant="outline"
+                  size="icon-sm"
                   type="button"
                   onClick={() => {
                     // Clicking IS the intent to return to the live end, so it
@@ -1095,15 +1117,10 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
                     void scrollToBottom({ animation: 'smooth' });
                   }}
                   aria-label="Scroll to latest message"
-                  className={cn(
-                    'absolute bottom-[var(--spacing-system-s)] left-1/2 z-10 -translate-x-1/2',
-                    'flex size-9 items-center justify-center rounded-full',
-                    'border border-ods-border bg-ods-card text-ods-text-primary shadow-lg',
-                    'transition-colors hover:bg-ods-bg-hover',
-                  )}
+                  className="absolute bottom-[var(--spacing-system-s)] left-1/2 z-10 -translate-x-1/2"
                 >
                   <Arrow02DownIcon size={16} />
-                </button>
+                </Button>
               )}
             </div>
 

package/src/components/chat/chat-message-row.tsx

@@ -21,10 +21,28 @@
 
 import { useState, type ReactNode } from 'react';
 import Image from '../../embed-shims/next-image';
+import { cn } from '../../utils/cn';
 import { personInitials } from '../../utils/format';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
+import { loadingItemProps, useLoadingScope } from '../ui/loading-scope';
 import { useProxiedImageUrl } from './hooks/use-proxied-image-url';
 
+/** The row: avatar beside the content, verbatim Slack spacing. */
+const ROW_CLASS = 'flex w-full min-w-0 gap-2 md:gap-3';
+/** The avatar box (image, initials and skeleton alike): 32px → 40px, rounded-lg. */
+const AVATAR_BOX_CLASS = 'h-8 w-8 flex-shrink-0 rounded-lg md:h-10 md:w-10';
+/** The content column beside the avatar. */
+const CONTENT_CLASS = 'min-w-0 max-w-full flex-1';
+/** The header line: name + relative time. */
+const HEADER_CLASS = 'mb-1 flex min-w-0 max-w-full items-center gap-2';
+/** The name's type (14/15px, leading 1.33): its line height is the header's in both forms. */
+const NAME_TYPE_CLASS = 'font-body text-[14px] font-bold leading-[1.33] tracking-[-0.02em] md:text-[15px]';
+/**
+ * How many lines a message body typically takes while it is read (a short chat message wraps once or twice). A
+ * typical count, not a measured one: the loaded body takes its own height.
+ */
+const CHAT_MESSAGE_ROW_BODY_LINES = 2;
+
 export interface ChatMessageRowProps {
   /** Display name (bold, top-left). */
   displayName: string;
@@ -41,9 +59,24 @@ export interface ChatMessageRowProps {
   body: string | ReactNode;
   /** Per-surface slot under the body: Slack reply badge / ticket attachments. */
   footer?: ReactNode;
+  /**
+   * The row while it is read (also inside a loading scope): the same boxes, the avatar a skeleton box, the name and
+   * time bars at their real line heights, the body a typical run of lines. Pass empty data props
+   * (`displayName=""`, `body=""`).
+   */
+  loading?: boolean;
+  /** List markers (`data-loading-item`), set by the list on its rows; forwarded in both forms. */
+  [key: `data-${string}`]: unknown;
+}
+
+export function ChatMessageRow(props: ChatMessageRowProps) {
+  const loading = useLoadingScope() || !!props.loading;
+  if (loading) return <ChatMessageRowLoading {...loadingItemProps(props)} />;
+  return <ChatMessageRowLoaded {...props} />;
 }
 
-export function ChatMessageRow({ displayName, avatarUrl, timeLabel, body, footer }: ChatMessageRowProps) {
+function ChatMessageRowLoaded(props: ChatMessageRowProps) {
+  const { displayName, avatarUrl, timeLabel, body, footer } = props;
   // Avatars load directly from their (https) host — same as the rest of the app,
   // so the browser disk-caches them (Google/etc. send `cache-control: max-age`).
   // `useProxiedImageUrl` only rewrites http/relative URLs; https pass through.
@@ -58,7 +91,7 @@ export function ChatMessageRow({ displayName, avatarUrl, timeLabel, body, footer
   const hasBody = typeof body === 'string' ? body.trim().length > 0 : body != null && body !== false;
 
   return (
-    <div className="flex w-full min-w-0 gap-2 md:gap-3">
+    <div className={ROW_CLASS} {...loadingItemProps(props)}>
       {/* Avatar — verbatim Slack sizing: 32px → 40px, rounded-lg, object-cover.
           Initials fallback uses the SAME box so layout is identical with or
           without an image. */}
@@ -66,24 +99,27 @@ export function ChatMessageRow({ displayName, avatarUrl, timeLabel, body, footer
         <Image
           src={src}
           alt={displayName}
-          className="h-8 w-8 flex-shrink-0 rounded-lg object-cover md:h-10 md:w-10"
+          className={cn(AVATAR_BOX_CLASS, 'object-cover')}
           width={40}
           height={40}
           onError={() => setFailedSrc(resolvedAvatar ?? null)}
         />
       ) : (
-        <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg border border-ods-border bg-ods-bg text-ods-text-primary text-h6 md:h-10 md:w-10">
+        <div
+          className={cn(
+            AVATAR_BOX_CLASS,
+            'flex items-center justify-center border border-ods-border bg-ods-bg text-ods-text-primary text-h6',
+          )}
+        >
           {personInitials(displayName) || '?'}
         </div>
       )}
 
       {/* Message content */}
-      <div className="min-w-0 max-w-full flex-1">
+      <div className={CONTENT_CLASS}>
         {/* Header — name + relative time. Verbatim Slack typography. */}
-        <div className="mb-1 flex min-w-0 max-w-full items-center gap-2">
-          <span className="truncate font-body text-[14px] font-bold leading-[1.33] tracking-[-0.02em] text-ods-text-primary md:text-[15px]">
-            {displayName}
-          </span>
+        <div className={HEADER_CLASS}>
+          <span className={cn('truncate text-ods-text-primary', NAME_TYPE_CLASS)}>{displayName}</span>
           {timeLabel && <span className="flex-shrink-0 text-ods-text-secondary text-h6">{timeLabel}</span>}
         </div>
 
@@ -99,24 +135,20 @@ export function ChatMessageRow({ displayName, avatarUrl, timeLabel, body, footer
 }
 
 /**
- * Skeleton with 1:1 structural parity to `<ChatMessageRow>` — SAME wrapper
- * (`flex gap-2 md:gap-3`), SAME avatar box (`w-8 h-8 md:w-10 md:h-10
- * rounded-lg`), SAME header `mb-1`, and bar heights matching the real
- * name/time/body line-heights so the loading→loaded swap does not reflow.
+ * The row's loading form, from the loaded row's own class constants: the same wrapper, avatar box and header, the
+ * name bar at the name's line height (`inherit` inside the name's type), the time bar at `text-h6`, and the body a
+ * typical run of `text-h6` lines.
  */
-export function ChatMessageRowSkeleton() {
+function ChatMessageRowLoading(markers: { [key: `data-${string}`]: unknown }) {
   return (
-    <div className="flex w-full min-w-0 gap-2 md:gap-3">
-      <UnifiedSkeleton className="h-8 w-8 flex-shrink-0 rounded-lg md:h-10 md:w-10" />
-      <div className="min-w-0 flex-1">
-        {/* Header row — name + time bars, same mb-1 + gap-2 as the real header. */}
-        <div className="mb-1 flex items-center gap-2">
-          <UnifiedSkeleton className="h-[15px] w-24 rounded md:h-[20px] md:w-32" />
-          <UnifiedSkeleton className="h-[12px] w-12 rounded md:h-[16px] md:w-16" />
+    <div className={ROW_CLASS} {...markers}>
+      <UnifiedSkeleton className={AVATAR_BOX_CLASS} />
+      <div className={CONTENT_CLASS}>
+        <div className={HEADER_CLASS}>
+          <TextLineSkeleton type="inherit" as="span" className={cn(NAME_TYPE_CLASS, 'w-24 md:w-32')} />
+          <TextLineSkeleton type="h6" as="span" className="w-12 flex-shrink-0 md:w-16" />
         </div>
-        {/* Two body lines — match the 12/14px body line-height. */}
-        <UnifiedSkeleton className="h-[14px] w-full rounded md:h-[18px]" />
-        <UnifiedSkeleton className="mt-1 h-[14px] w-3/4 rounded md:h-[18px]" />
+        <TextLineSkeleton type="h6" lines={CHAT_MESSAGE_ROW_BODY_LINES} />
       </div>
     </div>
   );