@flamingo-stack/openframe-frontend-core 0.0.685 → 0.0.686-2463.7461.1

package/src/components/chat/__tests__/onboarding-carousel.test.tsx

@@ -0,0 +1,56 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { OnboardingCarousel } from '../onboarding-carousel';
+
+const STEPS = [
+  { id: 'a', icon: null, title: 'First' },
+  { id: 'b', icon: null, title: 'Second' },
+  { id: 'c', icon: null, title: 'Third' },
+];
+
+const currentSlide = () =>
+  screen.getAllByRole('group', { hidden: true }).find(el => el.getAttribute('aria-hidden') === 'false');
+
+describe('OnboardingCarousel', () => {
+  it('starts on the first step with Previous disabled', () => {
+    render(<OnboardingCarousel steps={STEPS} onComplete={vi.fn()} />);
+    expect(currentSlide()).toHaveTextContent('First');
+    expect(screen.getByRole('button', { name: 'Previous Step' })).toHaveAttribute('aria-disabled', 'true');
+    expect(screen.getByRole('button', { name: 'Next Step' })).toBeEnabled();
+  });
+
+  it('walks forward and back', () => {
+    render(<OnboardingCarousel steps={STEPS} onComplete={vi.fn()} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Next Step' }));
+    expect(currentSlide()).toHaveTextContent('Second');
+    fireEvent.click(screen.getByRole('button', { name: 'Previous Step' }));
+    expect(currentSlide()).toHaveTextContent('First');
+    expect(screen.getByText('Step 1 of 3: First')).toHaveAttribute('aria-live', 'polite');
+  });
+
+  it('swaps Next for the complete action on the last step', () => {
+    const onComplete = vi.fn();
+    render(<OnboardingCarousel steps={STEPS} onComplete={onComplete} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Go to step 3' }));
+    expect(screen.queryByRole('button', { name: 'Next Step' })).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Start Chat' }));
+    expect(onComplete).toHaveBeenCalledTimes(1);
+  });
+
+  it('follows the arrow keys and stops at the ends', () => {
+    render(<OnboardingCarousel steps={STEPS} onComplete={vi.fn()} />);
+    const region = screen.getByRole('region', { name: 'Introduction' });
+    fireEvent.keyDown(region, { key: 'ArrowLeft' });
+    expect(currentSlide()).toHaveTextContent('First');
+    fireEvent.keyDown(region, { key: 'ArrowRight' });
+    fireEvent.keyDown(region, { key: 'ArrowRight' });
+    fireEvent.keyDown(region, { key: 'ArrowRight' });
+    expect(currentSlide()).toHaveTextContent('Third');
+  });
+
+  it('marks the current dot', () => {
+    render(<OnboardingCarousel steps={STEPS} onComplete={vi.fn()} />);
+    expect(screen.getByRole('button', { name: 'Go to step 1' })).toHaveAttribute('aria-current', 'step');
+    expect(screen.getByRole('button', { name: 'Go to step 2' })).not.toHaveAttribute('aria-current');
+  });
+});

package/src/components/chat/ai-assistant-info.tsx

@@ -3,6 +3,8 @@
 import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import { cn } from '../../utils/cn';
 import { formatTime } from '../../utils/format-date';
+import { useChatAppearance } from './chat-appearance-context';
+import { CHAT_APPEARANCE } from './types/chat.types';
 
 export interface AiAssistantInfoProps extends HTMLAttributes<HTMLDivElement> {
   /** Rendered inside the standard 48px framed box (typically a 24px icon). */
@@ -34,11 +36,15 @@ export interface AiAssistantInfoProps extends HTMLAttributes<HTMLDivElement> {
  */
 const AiAssistantInfo = forwardRef<HTMLDivElement, AiAssistantInfoProps>(
   ({ className, icon, leading, title, body, timestamp, ...props }, ref) => {
+    // v2: on the page surface, content centered against the 48px icon, and
+    // the thread (not the card) owns the space below it.
+    const isV2 = useChatAppearance() === CHAT_APPEARANCE.V2;
     return (
       <div
         ref={ref}
         className={cn(
-          'mb-[var(--spacing-system-xsf)] flex items-start gap-[var(--spacing-system-s)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-s)]',
+          'flex gap-[var(--spacing-system-s)] rounded-md border border-ods-border p-[var(--spacing-system-s)]',
+          isV2 ? 'items-center bg-ods-bg' : 'mb-[var(--spacing-system-xsf)] items-start bg-ods-card',
           className,
         )}
         {...props}

package/src/components/chat/approval-request-message.tsx

@@ -6,7 +6,9 @@ import { cn } from '../../utils/cn';
 import { Button } from '../ui/button';
 import { Tag } from '../ui/tag';
 import { ApprovalStatusTag } from './approval-batch-message';
+import { useChatAppearance } from './chat-appearance-context';
 import type { ApprovalRequestMessageProps } from './types';
+import { CHAT_APPEARANCE } from './types/chat.types';
 import type { ApprovalRequestField } from './types/message.types';
 
 /**
@@ -77,6 +79,7 @@ const ApprovalRequestMessage = forwardRef<HTMLDivElement, ApprovalRequestMessage
     ref,
   ) => {
     const [isProcessing, setIsProcessing] = useState(false);
+    const isV2 = useChatAppearance() === CHAT_APPEARANCE.V2;
 
     const handleApprove = async () => {
       setIsProcessing(true);
@@ -104,7 +107,9 @@ const ApprovalRequestMessage = forwardRef<HTMLDivElement, ApprovalRequestMessage
         <div
           ref={ref}
           className={cn(
-            'mb-[var(--spacing-system-xsf)] flex flex-col gap-[var(--spacing-system-mf)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-mf)]',
+            'flex flex-col gap-[var(--spacing-system-mf)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-mf)]',
+            // v2: the thread owns the space below the card.
+            !isV2 && 'mb-[var(--spacing-system-xsf)]',
             className,
           )}
           {...props}

package/src/components/chat/chat-appearance-context.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+import { CHAT_APPEARANCE, type ChatAppearance } from './types/chat.types';
+
+/**
+ * Thread-wide `ChatAppearance`. `ChatMessageList` provides it, so the blocks a
+ * message renders (error, lifecycle receipts) follow the thread without every
+ * segment component growing an `appearance` prop.
+ */
+export const ChatAppearanceContext = createContext<ChatAppearance>(CHAT_APPEARANCE.CLASSIC);
+
+export function useChatAppearance(): ChatAppearance {
+  return useContext(ChatAppearanceContext);
+}

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

@@ -16,10 +16,12 @@ import {
 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 { Tag } from '../ui/tag';
 import { ChatTypingIndicator } from './chat-typing-indicator';
 import { SlashCommandSuggestions } from './slash-command-suggestions';
 import type { ChatInputProps, ChatInputRef, MentionMeta, SlashCommandSummary } from './types';
+import { CHAT_APPEARANCE } from './types/chat.types';
 
 /** SHARED with `lib/config/slash-commands-config.ts` AND the chat-route slash
  *  dispatch parser. Keep all three in sync. */
@@ -164,6 +166,9 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
     onStop,
     sending = false,
     awaitingResponse = false,
+    awaitingTeam,
+    awaitingTeamCount,
+    appearance = CHAT_APPEARANCE.CLASSIC,
     placeholder = 'Enter your Request...',
     reserveAvatarOffset: _reserveAvatarOffset,
     disabled = false,
@@ -560,11 +565,31 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
         className,
       )}
     >
-      {awaitingResponse ? (
+      {awaitingResponse && appearance === CHAT_APPEARANCE.CLASSIC ? (
         <div className="relative flex items-center justify-center gap-[var(--spacing-system-xs)] rounded-md border border-ods-border bg-ods-card px-[var(--spacing-system-s)] py-[var(--spacing-system-s)] transition-colors">
           <ChatTypingIndicator size="sm" dotClassName="bg-ods-text-primary" />
           <p className="text-ods-text-secondary text-h4">Waiting for Technician Response</p>
         </div>
+      ) : awaitingResponse ? (
+        // Hand-off bar (fae chat v2): who has the conversation now, and that a
+        // reply is on its way. Same 48px height as the editor row it replaces,
+        // so the thread above does not jump when the chat is handed off.
+        <div
+          role="status"
+          className="flex min-h-11 w-full items-center justify-center gap-[var(--spacing-system-xs)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-sf)] md:min-h-12"
+        >
+          {awaitingTeam && awaitingTeam.length > 0 && (
+            <AvatarStack
+              people={awaitingTeam}
+              total={awaitingTeamCount}
+              size="xs"
+              ringClassName="ring-ods-bg"
+              label="Technicians"
+            />
+          )}
+          <p className="min-w-0 truncate text-ods-text-primary text-h4">Handed off to your technical support team</p>
+          <ChatTypingIndicator size="sm" dotClassName="bg-ods-text-secondary" />
+        </div>
       ) : (
         <div className="relative">
           <SlashCommandSuggestions

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

@@ -11,6 +11,7 @@ import { SquareAvatar } from '../ui/square-avatar';
 import { ApprovalBatchMessage } from './approval-batch-message';
 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 type { ChatRef } from './chat-ref.types';
 import { ContextCompactionDisplay } from './context-compaction-display';
@@ -20,11 +21,13 @@ import { EscalationOfferMessage } from './escalation-offer-message';
 import { remarkCardLinks } from './remark-card-links';
 import { remarkMentionChips } from './remark-mention-chips';
 import { remarkStripCitations } from './remark-strip-citations';
+import { SystemEventMessage } from './system-event-message';
 import { ThinkingDisplay } from './thinking-display';
 import { TicketEscalatedMessage } from './ticket-escalated-message';
 import { TicketEventMessage } from './ticket-event-message';
 import { ToolExecutionDisplay } from './tool-execution-display';
 import type { AskSegment, MessageSegment, MessageContent, ChatMessageEnhancedProps } from './types';
+import { CHAT_APPEARANCE } from './types/chat.types';
 
 /** Inline `@marker:id` mention token in the message body (sibling of the
  *  `[card://]` grammar) — used to filter out items rendered inline from the
@@ -94,6 +97,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
       showAvatar = true,
       assistantType,
       approvalVariant,
+      appearance: appearanceProp,
       authorType: authorTypeProp,
       assistantIcon,
       contextItems,
@@ -110,6 +114,9 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
   ) => {
     const isUser = role === 'user';
     const isError = role === 'error';
+    const inheritedAppearance = useChatAppearance();
+    const appearance = appearanceProp ?? inheritedAppearance;
+    const isV2 = appearance === CHAT_APPEARANCE.V2;
     const authorType = authorTypeProp ?? (isUser ? 'user' : assistantType === 'mingo' ? 'mingo' : 'fae');
 
     // Inline-card rendering uses a HOST-PROVIDED `renderEntityCard` function
@@ -518,7 +525,8 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
         // (passing pre-joined initials like "PS" would collapse to one letter,
         // since getFirstLastInitials treats it as a single word).
         fallback: displayName,
-        size: 'sm' as const,
+        // v2 (fae chat v2): a 24px face that sits on the name's line height.
+        size: isV2 ? ('xs' as const) : ('sm' as const),
         variant: 'round' as const,
         // User avatar: compact 20×20 with 2px padding and a subtle gray fill
         // (`bg-ods-card`) so the `border-ods-border` ring stays visible — the
@@ -536,9 +544,32 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
 
     const isSystem = authorType === 'system';
 
+    // v2 draws a system line (e.g. a technician joining) as an in-thread
+    // 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}>
+          <ChatAppearanceContext.Provider value={appearance}>
+            <SystemEventMessage text={name} timestamp={timestamp} />
+          </ChatAppearanceContext.Provider>
+        </div>
+      );
+    }
+
     return (
-      <div ref={ref} className={cn('relative py-[var(--spacing-system-s)]', className)} {...props}>
-        {/* Message Content — full panel width.
+      <ChatAppearanceContext.Provider value={appearance}>
+        <div
+          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)]',
+            className,
+          )}
+          {...props}
+        >
+          {/* Message Content — full panel width.
             Avatar is INLINE in the name row below (2025-2026 chat
             pattern — Claude.ai, ChatGPT, Gemini, Perplexity).
             Legacy hanging-avatar layout (`absolute -left-16`) wasted
@@ -552,8 +583,8 @@ 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)]">
-          {/* Avatar + Name + Timestamp Row.
+          <div className="grid min-w-0 grid-cols-1 gap-[var(--spacing-system-xxs)]">
+            {/* Avatar + Name + Timestamp Row.
               Sizing rationale (per design-token measurements):
                 - Name uses `text-h3` = 14px mobile / 18px desktop.
                 - Avatar uses `SquareAvatar size="sm"` = 32px — the
@@ -569,155 +600,161 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
               inside via `flex items-center justify-center` — they
               should be sized at ~50-60% of the wrapper (h-4 w-4 =
               16px works well for a 32px circle). */}
-          <div className="flex items-center gap-[var(--spacing-system-xs)]">
-            {/* Avatar rules:
+            <div
+              className={cn(
+                'flex items-center',
+                isV2 ? 'gap-[var(--spacing-system-xxs)]' : 'gap-[var(--spacing-system-xs)]',
+              )}
+            >
+              {/* Avatar rules:
                 - Assistant/Fae always show an avatar — host brand icon when no
                   image is supplied, else the filled SquareAvatar.
                 - User shows the SquareAvatar ONLY when an avatar image actually
                   arrived. With no user avatar we hide the block entirely (just
                   the name), instead of an initials placeholder. TEMPORARY —
                   restore the user placeholder when user avatars ship. */}
-            {showAvatar &&
-              !isSystem &&
-              !(isUser && !avatar) &&
-              (!isUser && assistantIcon && !avatar ? (
-                // Host-supplied brand icon (e.g. Mingo): render it directly,
-                // no filled pill — the icon carries its own brand accent.
-                <div className="flex flex-shrink-0 items-center justify-center">{assistantIcon}</div>
-              ) : (
-                <SquareAvatar {...avatarProps} />
-              ))}
-            <span
-              className={cn(
-                'flex-1 !font-mono !font-medium text-h3',
-                authorType === 'system'
-                  ? 'text-ods-open-yellow'
-                  : authorType === 'admin'
+              {showAvatar &&
+                !isSystem &&
+                !(isUser && !avatar) &&
+                (!isUser && assistantIcon && !avatar ? (
+                  // Host-supplied brand icon (e.g. Mingo): render it directly,
+                  // no filled pill — the icon carries its own brand accent.
+                  <div className="flex flex-shrink-0 items-center justify-center">{assistantIcon}</div>
+                ) : (
+                  <SquareAvatar {...avatarProps} />
+                ))}
+              <span
+                className={cn(
+                  'flex-1 !font-mono !font-medium text-h3',
+                  authorType === 'system'
                     ? 'text-ods-open-yellow'
-                    : authorType === 'mingo'
-                      ? 'text-ods-flamingo-cyan'
-                      : authorType === 'fae'
-                        ? 'text-ods-flamingo-pink'
-                        : 'text-ods-text-secondary',
-              )}
-            >
-              {name || (isUser ? 'User' : assistantType === 'mingo' ? 'Mingo' : 'Fae')}
-              {!isSystem && ':'}
-            </span>
-            {timestamp && (
-              <span className="shrink-0 whitespace-nowrap text-ods-text-secondary text-h6">
-                {formatMessageTimestamp(timestamp)}
+                    : authorType === 'admin'
+                      ? 'text-ods-open-yellow'
+                      : authorType === 'mingo'
+                        ? 'text-ods-flamingo-cyan'
+                        : authorType === 'fae'
+                          ? 'text-ods-flamingo-pink'
+                          : 'text-ods-text-secondary',
+                )}
+              >
+                {name || (isUser ? 'User' : assistantType === 'mingo' ? 'Mingo' : 'Fae')}
+                {!isSystem && !isV2 && ':'}
               </span>
-            )}
-          </div>
-
-          {/* Message segments — hidden for system messages without content */}
-          {(!isSystem || segments.length > 0) && (
-            <div className="grid grid-cols-1 gap-2">
-              {segments.map((segment, index) => {
-                // The engine's streaming path (atomic-block memoization +
-                // fence tail-completion + aria-live) applies ONLY to the
-                // actively streaming segment: last segment of a message that
-                // is still typing. On completion `isTyping` flips false and
-                // the engine does one authoritative whole-document parse.
-                const segmentIsStreaming = index === segments.length - 1 && !!isTyping;
-                if (segment.type === 'text') {
-                  return (
-                    <div
-                      key={index}
-                      className={cn(
-                        'w-full min-w-0 break-words text-h4',
-                        isError ? 'text-ods-error' : 'text-ods-text-primary',
-                      )}
-                    >
-                      {renderSegmentBody(index, segment.text, segmentIsStreaming)}
-                    </div>
-                  );
-                } else if (segment.type === 'ask') {
-                  // Only the run's head draws — the tail segments are pages of
-                  // the card already rendered above them.
-                  const run = askRuns.get(index);
-                  if (!run) return null;
-                  return <AskDisplay key={index} cards={run} onSelect={onAskSelect} />;
-                } else if (segment.type === 'tool_execution') {
-                  return (
-                    <ToolExecutionDisplay
-                      key={index}
-                      message={segment.data}
-                      assistantType={assistantType}
-                      variant={approvalVariant}
-                    />
-                  );
-                } else if (segment.type === 'approval_request') {
-                  return (
-                    <ApprovalRequestMessage
-                      key={index}
-                      data={segment.data}
-                      status={segment.status}
-                      resolvedByName={segment.resolvedByName}
-                      onApprove={segment.onApprove}
-                      onReject={segment.onReject}
-                      assistantType={assistantType}
-                      variant={approvalVariant}
-                    />
-                  );
-                } else if (segment.type === 'approval_batch') {
-                  return (
-                    <ApprovalBatchMessage
-                      key={index}
-                      data={segment.data}
-                      status={segment.status}
-                      resolvedByName={segment.resolvedByName}
-                      onApprove={segment.onApprove}
-                      onReject={segment.onReject}
-                      assistantType={assistantType}
-                      variant={approvalVariant}
-                    />
-                  );
-                } else if (segment.type === 'escalation_offer') {
-                  return (
-                    <EscalationOfferMessage
-                      key={index}
-                      data={segment.data}
-                      status={segment.status}
-                      resolvedByName={segment.resolvedByName}
-                      onApprove={segment.onApprove}
-                      onReject={segment.onReject}
-                    />
-                  );
-                } else if (segment.type === 'ticket_escalated') {
-                  return <TicketEscalatedMessage key={index} data={segment.data} timestamp={timestamp} />;
-                } else if (segment.type === 'ticket_event') {
-                  // The card's own event time; the bubble timestamp is the
-                  // turn's FIRST row and lags every later lifecycle event.
-                  return (
-                    <TicketEventMessage key={index} data={segment.data} timestamp={segment.occurredAt ?? timestamp} />
-                  );
-                } else if (segment.type === 'error') {
-                  return <ErrorMessageDisplay key={index} title={segment.title} details={segment.details} />;
-                } else if (segment.type === 'context_compaction') {
-                  return <ContextCompactionDisplay key={index} status={segment.status} />;
-                } else if (segment.type === 'thinking') {
-                  const isStreaming = index === segments.length - 1 && isTyping;
-                  return <ThinkingDisplay key={index} text={segment.text} isStreaming={isStreaming} />;
-                }
-                return null;
-              })}
+              {timestamp && (
+                <span className="shrink-0 whitespace-nowrap text-ods-text-secondary text-h6">
+                  {formatMessageTimestamp(timestamp)}
+                </span>
+              )}
             </div>
-          )}
 
-          {/* Attached entity-context chips (user bubbles). Read-only — no
+            {/* Message segments — hidden for system messages without content */}
+            {(!isSystem || segments.length > 0) && (
+              <div className="grid grid-cols-1 gap-2">
+                {segments.map((segment, index) => {
+                  // The engine's streaming path (atomic-block memoization +
+                  // fence tail-completion + aria-live) applies ONLY to the
+                  // actively streaming segment: last segment of a message that
+                  // is still typing. On completion `isTyping` flips false and
+                  // the engine does one authoritative whole-document parse.
+                  const segmentIsStreaming = index === segments.length - 1 && !!isTyping;
+                  if (segment.type === 'text') {
+                    return (
+                      <div
+                        key={index}
+                        className={cn(
+                          'w-full min-w-0 break-words text-h4',
+                          isError ? 'text-ods-error' : 'text-ods-text-primary',
+                        )}
+                      >
+                        {renderSegmentBody(index, segment.text, segmentIsStreaming)}
+                      </div>
+                    );
+                  } else if (segment.type === 'ask') {
+                    // Only the run's head draws — the tail segments are pages of
+                    // the card already rendered above them.
+                    const run = askRuns.get(index);
+                    if (!run) return null;
+                    return <AskDisplay key={index} cards={run} onSelect={onAskSelect} />;
+                  } else if (segment.type === 'tool_execution') {
+                    return (
+                      <ToolExecutionDisplay
+                        key={index}
+                        message={segment.data}
+                        assistantType={assistantType}
+                        variant={approvalVariant}
+                      />
+                    );
+                  } else if (segment.type === 'approval_request') {
+                    return (
+                      <ApprovalRequestMessage
+                        key={index}
+                        data={segment.data}
+                        status={segment.status}
+                        resolvedByName={segment.resolvedByName}
+                        onApprove={segment.onApprove}
+                        onReject={segment.onReject}
+                        assistantType={assistantType}
+                        variant={approvalVariant}
+                      />
+                    );
+                  } else if (segment.type === 'approval_batch') {
+                    return (
+                      <ApprovalBatchMessage
+                        key={index}
+                        data={segment.data}
+                        status={segment.status}
+                        resolvedByName={segment.resolvedByName}
+                        onApprove={segment.onApprove}
+                        onReject={segment.onReject}
+                        assistantType={assistantType}
+                        variant={approvalVariant}
+                      />
+                    );
+                  } else if (segment.type === 'escalation_offer') {
+                    return (
+                      <EscalationOfferMessage
+                        key={index}
+                        data={segment.data}
+                        status={segment.status}
+                        resolvedByName={segment.resolvedByName}
+                        onApprove={segment.onApprove}
+                        onReject={segment.onReject}
+                      />
+                    );
+                  } else if (segment.type === 'ticket_escalated') {
+                    return <TicketEscalatedMessage key={index} data={segment.data} timestamp={timestamp} />;
+                  } else if (segment.type === 'ticket_event') {
+                    // The card's own event time; the bubble timestamp is the
+                    // turn's FIRST row and lags every later lifecycle event.
+                    return (
+                      <TicketEventMessage key={index} data={segment.data} timestamp={segment.occurredAt ?? timestamp} />
+                    );
+                  } else if (segment.type === 'error') {
+                    return <ErrorMessageDisplay key={index} title={segment.title} details={segment.details} />;
+                  } else if (segment.type === 'context_compaction') {
+                    return <ContextCompactionDisplay key={index} status={segment.status} />;
+                  } else if (segment.type === 'thinking') {
+                    const isStreaming = index === segments.length - 1 && isTyping;
+                    return <ThinkingDisplay key={index} text={segment.text} isStreaming={isStreaming} />;
+                  }
+                  return null;
+                })}
+              </div>
+            )}
+
+            {/* Attached entity-context chips (user bubbles). Read-only — no
               remove affordance once the message is sent (Figma 31:28709). */}
-          {stripContextItems && stripContextItems.length > 0 && (
-            <ChatContextChipStrip
-              items={stripContextItems}
-              resolveIcon={resolveContextIcon}
-              renderItem={renderContextItem}
-              className="mt-2"
-            />
-          )}
+            {stripContextItems && stripContextItems.length > 0 && (
+              <ChatContextChipStrip
+                items={stripContextItems}
+                resolveIcon={resolveContextIcon}
+                renderItem={renderContextItem}
+                className="mt-2"
+              />
+            )}
+          </div>
         </div>
-      </div>
+      </ChatAppearanceContext.Provider>
     );
   },
 );
@@ -735,6 +772,7 @@ const MemoizedChatMessageEnhanced = memo(ChatMessageEnhanced, (prevProps, nextPr
     prevProps.showAvatar === nextProps.showAvatar &&
     prevProps.assistantType === nextProps.assistantType &&
     prevProps.approvalVariant === nextProps.approvalVariant &&
+    prevProps.appearance === nextProps.appearance &&
     prevProps.authorType === nextProps.authorType &&
     prevProps.assistantIcon === nextProps.assistantIcon &&
     prevProps.className === nextProps.className &&