@flamingo-stack/openframe-frontend-core 0.0.523-1663.4375.1 → 0.0.523-1680.4386.1

package/src/components/chat/stream/message-mutations.ts

@@ -75,11 +75,37 @@ export function updateTrailingAssistant(
   return [...prev.slice(0, -1), { ...last, segments }]
 }
 
+/**
+ * Identity of a block that must upsert rather than stack when re-appended,
+ * namespaced so two kinds can never collide. `null` for segments that coalesce
+ * by adjacency (text/thinking/guide) or are pushed raw. Legacy approval cards
+ * share one requestId across an unfolded batch, hence the command in the key.
+ *
+ * `ticket_escalated` keys on its dialog-scoped ticketId, which is safe HERE
+ * (two receipts inside one trailing bubble can only be a redelivery) but is NOT
+ * a turn identity — see the deliberate omissions in `turnRequestKeys` and the
+ * host's thread-global dedupe.
+ */
+function upsertKey(seg: MessageSegment): string | null {
+  switch (seg.type) {
+    case 'approval_batch':
+      return `batch:${seg.data.approvalRequestId}`
+    case 'approval_request':
+      return `req:${seg.data.requestId}:${seg.data.command}`
+    case 'escalation_offer':
+      return `offer:${seg.data.offerId}`
+    case 'ticket_escalated':
+      return `escalated:${seg.data.ticketId}`
+    default:
+      return null
+  }
+}
+
 /**
  * Append-mode counterpart of `updateTrailingAssistant` for post-MESSAGE_END
  * continuation fragments (`SegmentsUpdateMetadata.append`). Coalesces
- * trailing fragments of the same type, mirroring the accumulator; approval
- * deltas upsert by request id so a replayed emit stays idempotent.
+ * trailing fragments of the same type, mirroring the accumulator; block deltas
+ * upsert by identity (see `upsertKey`) so a replayed emit stays idempotent.
  */
 export function appendToTrailingAssistant(
   prev: UnifiedChatMessage[],
@@ -96,30 +122,18 @@ export function appendToTrailingAssistant(
   const merged = [...(last.segments ?? [])]
   for (const seg of segments) {
     const tail = merged[merged.length - 1]
+    const key = upsertKey(seg)
     if (seg.type === 'text' && tail?.type === 'text') {
       merged[merged.length - 1] = { type: 'text', text: tail.text + seg.text }
     } else if (seg.type === 'thinking' && tail?.type === 'thinking') {
       merged[merged.length - 1] = { type: 'thinking', text: tail.text + seg.text }
     } else if (seg.type === 'guide' && tail?.type === 'guide') {
       merged[merged.length - 1] = { type: 'guide', text: tail.text + seg.text }
-    } else if (seg.type === 'approval_batch') {
-      // Approval deltas must be IDEMPOTENT: the escalated-result emit can be
-      // seen twice (live + catch-up replay over hydrated history), so upsert
-      // by request id instead of raw-appending a duplicate card.
-      const idx = merged.findIndex(
-        (m) => m.type === 'approval_batch' && m.data.approvalRequestId === seg.data.approvalRequestId,
-      )
-      if (idx !== -1) merged[idx] = seg
-      else merged.push(seg)
-    } else if (seg.type === 'approval_request') {
-      // Legacy cards share one requestId across an unfolded batch — key on
-      // (requestId, command) so each tool's card upserts its own twin.
-      const idx = merged.findIndex(
-        (m) =>
-          m.type === 'approval_request' &&
-          m.data.requestId === seg.data.requestId &&
-          m.data.command === seg.data.command,
-      )
+    } else if (key) {
+      // Block deltas must be IDEMPOTENT: an emit can be seen twice (live plus
+      // the JetStream catch-up replay over hydrated history), so upsert on the
+      // block's identity instead of raw-appending a duplicate card.
+      const idx = merged.findIndex((m) => upsertKey(m) === key)
       if (idx !== -1) merged[idx] = seg
       else merged.push(seg)
     } else {
@@ -177,6 +191,10 @@ function mapSegments(
  *   - `approval_batch` ROW (`toolCalls[].toolExecutionRequestId`) →
  *     tick that row's execution (check on approved, cross otherwise)
  *     without touching the batch status.
+ *   - `escalation_offer` matched on `data.offerId` → status flip +
+ *     resolver stamp. Escalation offers are backed by the SAME
+ *     `ToolApprovalRequest` collection as command approvals, so the two id
+ *     spaces are one and a cross-match is impossible.
  * Returns the SAME reference when nothing matched or changed.
  */
 export function applyApprovalStatusToSegment(
@@ -188,6 +206,15 @@ export function applyApprovalStatusToSegment(
   if (s.type === 'approval_request' && s.data.requestId === requestId && s.status !== status) {
     return { ...s, status }
   }
+  if (s.type === 'escalation_offer') {
+    if (s.data.offerId !== requestId) return s
+    const nextResolvedBy = resolvedByName ?? s.resolvedByName
+    // Status alone is not enough to early-out: the host overlay flips the
+    // status first and the persisted row supplies the resolver name after, so
+    // bailing on an unchanged status drops the "by {name}" stamp.
+    if (s.status === status && nextResolvedBy === s.resolvedByName) return s
+    return { ...s, status, resolvedByName: nextResolvedBy }
+  }
   if (s.type !== 'approval_batch') return s
   const isAnchor = s.data.approvalRequestId === requestId
   const hasRow = s.data.toolCalls?.some((c) => c.toolExecutionRequestId === requestId)

package/src/components/chat/ticket-escalated-message.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import { forwardRef, type HTMLAttributes } from "react"
+import { cn } from "../../utils/cn"
+import { formatTime } from "../../utils/format-date"
+import { InfoCircleIcon } from "../icons-v2-generated"
+import type { TicketEscalatedSegment } from "./types/message.types"
+
+const TITLE = "Handed Off to a Technician"
+
+/** Shown when the wire omits `text` (the field is nullable). */
+const DEFAULT_BODY = "A technician will reply when available."
+
+export interface TicketEscalatedMessageProps extends HTMLAttributes<HTMLDivElement> {
+  data: TicketEscalatedSegment['data']
+  /** Timestamp of the message row this block came in on. */
+  timestamp?: Date
+}
+
+/**
+ * Handoff receipt — the conversation now belongs to a human technician.
+ * Figma `ai-assistant-info` (type=escalation).
+ *
+ * The body is whatever the backend authored, so the reason it gives stays
+ * server-side; the client never composes an explanation and never branches on
+ * `data.reason`, which is why a reason added server-side needs no change here.
+ *
+ * That body WRAPS, deliberately diverging from the mock's single-line ellipsis:
+ * the mock's 72px comes from its placeholder copy fitting one line, while the
+ * real wire text is a full sentence, and clipping the only explanation of why
+ * the chat was handed off is not recoverable on touch. The title still
+ * truncates — it is a constant, and holding one line keeps the timestamp from
+ * being pushed out of the row at narrow widths.
+ */
+const TicketEscalatedMessage = forwardRef<HTMLDivElement, TicketEscalatedMessageProps>(
+  ({ className, data, timestamp, ...props }, ref) => {
+    const body = data.text?.trim() || DEFAULT_BODY
+    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)]",
+          className,
+        )}
+        {...props}
+      >
+        <div className="flex size-12 shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-bg">
+          <InfoCircleIcon className="size-6 text-ods-flamingo-pink" />
+        </div>
+        <div className="flex min-w-0 flex-1 flex-col">
+          <div className="flex w-full items-start">
+            <p className="text-h4 min-w-0 flex-1 truncate text-ods-text-primary" title={TITLE}>
+              {TITLE}
+            </p>
+            {timestamp && (
+              <span className="text-h6 shrink-0 text-right text-ods-text-secondary">{formatTime(timestamp)}</span>
+            )}
+          </div>
+          <p className="text-h4 w-full break-words text-ods-text-secondary">{body}</p>
+        </div>
+      </div>
+    )
+  },
+)
+
+TicketEscalatedMessage.displayName = "TicketEscalatedMessage"
+
+export { TicketEscalatedMessage }

package/src/components/chat/types/message.types.ts

@@ -16,6 +16,8 @@ export const MESSAGE_TYPE = {
   EXECUTED_TOOL: 'EXECUTED_TOOL',
   APPROVAL_REQUEST: 'APPROVAL_REQUEST',
   APPROVAL_RESULT: 'APPROVAL_RESULT',
+  ESCALATION_OFFER: 'ESCALATION_OFFER',
+  TICKET_ESCALATED: 'TICKET_ESCALATED',
   ERROR: 'ERROR',
   MESSAGE_START: 'MESSAGE_START',
   MESSAGE_END: 'MESSAGE_END',
@@ -121,6 +123,35 @@ export interface ApprovalResultData {
   resolvedByName?: string | null
 }
 
+// ========== Escalation Offer Types ==========
+
+export interface EscalationOfferData {
+  offerId: string
+  /** Backend-fixed card copy; the client never composes it. */
+  text: string
+  /** Why the offer was raised (`TOOL`, `MANUAL`, a trigger reason). Carried
+   *  for telemetry — every origin renders the same card. */
+  origin?: string
+}
+
+// ========== Ticket Escalated Types ==========
+
+/** Open union: the wire currently defines only `INACTIVITY`, and the block
+ *  renders from `text` rather than branching on this, so a reason added
+ *  server-side needs no client change. */
+export type TicketEscalationReason = 'INACTIVITY' | (string & {})
+
+/** The handoff receipt — a real block on the wire, not something the client
+ *  infers from an escalation offer's state. */
+export interface TicketEscalatedData {
+  ticketId: string
+  ticketNumber?: number
+  reason: TicketEscalationReason
+  /** Backend-authored explanation; the card falls back to generic copy when
+   *  the wire omits it (the field is nullable). */
+  text?: string
+}
+
 /**
  * Single tool call inside a batch approval request.
  * Mirrors backend PendingToolCallDto.
@@ -239,6 +270,35 @@ export type ApprovalBatchSegment = {
   onReject?: ApprovalResolutionHandler
 }
 
+/**
+ * Ticket-escalation offer block. Visually the client approval card (same
+ * Figma component), but a SEPARATE segment type on purpose: it resolves
+ * through the ticket-escalation GraphQL mutations rather than the tool
+ * approval endpoint, and hosts that hide pending tool approvals from the
+ * thread must still render this one inline.
+ *
+ * `cancelled` is the wire's SUPERSEDED — the client typed over the offer.
+ */
+export type EscalationOfferSegment = {
+  type: 'escalation_offer'
+  data: EscalationOfferData
+  status?: ChatApprovalStatus
+  resolvedByName?: string | null
+  onApprove?: ApprovalResolutionHandler
+  onReject?: ApprovalResolutionHandler
+}
+
+/**
+ * The conversation was handed off to a human technician. Decoded from the
+ * `TICKET_ESCALATED` block, so it appears for every escalation path the
+ * backend emits it for — including the inactivity auto-escalation, which
+ * raises no offer and therefore has no offer state to infer from.
+ */
+export type TicketEscalatedSegment = {
+  type: 'ticket_escalated'
+  data: TicketEscalatedData
+}
+
 export type ErrorSegment = {
   type: 'error'
   title: string
@@ -251,7 +311,7 @@ export type ContextCompactionSegment = {
   summary?: string
 }
 
-export type MessageSegment = TextSegment | ThinkingSegment | GuideSegment | AskSegment | ToolExecutionSegment | ApprovalRequestSegment | ApprovalBatchSegment | ErrorSegment | ContextCompactionSegment
+export type MessageSegment = TextSegment | ThinkingSegment | GuideSegment | AskSegment | ToolExecutionSegment | ApprovalRequestSegment | ApprovalBatchSegment | EscalationOfferSegment | TicketEscalatedSegment | ErrorSegment | ContextCompactionSegment
 
 export type MessageContent = string | MessageSegment[]
 
@@ -329,6 +389,29 @@ export interface ApprovalResultMessageData extends MessageDataBase {
   resolvedByName?: string | null
 }
 
+/**
+ * Persisted escalation-offer row. The PENDING row carries `text`/`origin`;
+ * the resolution is a SECOND row with the same `offerId`, state
+ * APPROVED/DECLINED/SUPERSEDED and no text — matched on replay by id.
+ */
+export interface EscalationOfferMessageData extends MessageDataBase {
+  type: 'ESCALATION_OFFER'
+  offerId?: string
+  state?: string
+  text?: string
+  origin?: string
+  resolvedByUserId?: string | null
+  resolvedByName?: string | null
+}
+
+export interface TicketEscalatedMessageData extends MessageDataBase {
+  type: 'TICKET_ESCALATED'
+  ticketId?: string
+  ticketNumber?: number
+  reason?: TicketEscalationReason
+  text?: string
+}
+
 export interface ErrorMessageData extends MessageDataBase {
   type: 'ERROR'
   error?: string
@@ -373,6 +456,8 @@ export type MessageData =
   | ExecutedToolMessageData
   | ApprovalRequestMessageData
   | ApprovalResultMessageData
+  | EscalationOfferMessageData
+  | TicketEscalatedMessageData
   | ErrorMessageData
   | AIMetadataMessageData
   | SystemMessageData

package/src/components/chat/types/processing.types.ts

@@ -47,6 +47,19 @@ export interface MessageProcessingOptions {
   chatTypeFilter?: string
   /** Map of approval statuses by request ID */
   approvalStatuses?: Record<string, ChatApprovalStatus>
+  /**
+   * Terminal escalation-offer states by offer id, from live chunks the host
+   * has already seen. Needed because an offer and its resolution are two
+   * separate persisted rows: SUPERSEDED is published *because* the client
+   * typed, so a user message always separates them and the two rows land in
+   * different assistant envelopes.
+   */
+  escalationOfferStates?: Record<string, ChatApprovalStatus>
+  /** Escalation approve handler; distinct from `onApprove` because offers
+   *  resolve through the ticket-escalation mutations. */
+  onEscalationApprove?: (offerId?: string) => Promise<void> | void
+  /** Escalation reject handler. See `onEscalationApprove`. */
+  onEscalationReject?: (offerId?: string) => Promise<void> | void
   /** Approval types to display directly (others get escalated) - defaults to all types */
   displayApprovalTypes?: string[]
   /**

package/src/components/chat/utils/extract-incomplete-message-state.ts

@@ -109,6 +109,16 @@ export function extractIncompleteMessageState(
         break
       }
 
+      case 'escalation_offer':
+        // A pending offer leaves the turn unfinished so the reducer holds the
+        // card and the resolution chunk can flip it in place. It never sets
+        // `agentBusy`: Fae is blocked on the user's decision, and on approval
+        // she goes SILENT rather than resuming — there is no work to spin for.
+        if (!segment.status || segment.status === 'pending') {
+          hasIncompleteState = true
+        }
+        break
+
       case 'context_compaction':
         if (segment.status === 'started') {
           hasIncompleteState = true

package/src/components/chat/utils/history-merge.ts

@@ -1,6 +1,7 @@
 import type {
   ApprovalBatchSegment,
   ApprovalRequestSegment,
+  EscalationOfferSegment,
   MessageContent,
   ToolExecutionSegment,
 } from '../types'
@@ -106,6 +107,12 @@ function turnRequestKeys(content: MessageContent): Set<string> {
     } else if (seg.type === 'approval_request') {
       const id = (seg as ApprovalRequestSegment).data?.requestId
       if (id) keys.add(id)
+    } else if (seg.type === 'escalation_offer') {
+      const id = (seg as EscalationOfferSegment).data?.offerId
+      if (id) keys.add(id)
+      // `ticket_escalated` is deliberately absent: its only id is the ticketId,
+      // which is dialog-scoped, so a re-escalated dialog would false-match an
+      // older bubble and slice the newest persisted turn out of the thread.
     } else if (seg.type === 'approval_batch') {
       const data = (seg as ApprovalBatchSegment).data
       if (data?.approvalRequestId) keys.add(data.approvalRequestId)

package/src/components/chat/utils/message-segment-accumulator.ts

@@ -16,6 +16,9 @@ import type {
   ApprovalBatchSegment,
   ApprovalBatchExecutionState,
   ApprovalResolutionHandler,
+  EscalationOfferSegment,
+  TicketEscalatedData,
+  TicketEscalatedSegment,
   ContextCompactionSegment,
   ErrorSegment,
   PendingApproval,
@@ -35,6 +38,12 @@ export interface AccumulatorCallbacks {
    *  approve/reject signature incl. the boolean failure flag. */
   onApprove?: ApprovalResolutionHandler
   onReject?: ApprovalResolutionHandler
+  /** Escalation offers resolve through the ticket-escalation mutations, NOT
+   *  the tool-approval endpoint, so they carry their own pair of handlers.
+   *  Sharing `onApprove`/`onReject` would POST an offer id to the approval
+   *  endpoint, which has no record of it. */
+  onEscalationApprove?: ApprovalResolutionHandler
+  onEscalationReject?: ApprovalResolutionHandler
 }
 
 /**
@@ -432,11 +441,73 @@ export class MessageSegmentAccumulator {
   }
 
   /**
-   * Update status of an existing approval segment (single or batch).
+   * Add a ticket-escalation offer block. Upserts by `offerId` for the same
+   * reason `addApprovalBatch` does: the consumer-store replay path feeds
+   * `[existing..., new...]` back through `replaySegments`, which would
+   * otherwise yield two cards for one offer.
+   */
+  addEscalationOffer(
+    offerId: string,
+    text: string,
+    origin: string | undefined,
+    status: ChatApprovalStatus = 'pending',
+    resolvedByName?: string | null,
+  ): MessageSegment[] {
+    const existingIndex = this.segments.findIndex(
+      (s): s is EscalationOfferSegment =>
+        s.type === 'escalation_offer' && s.data.offerId === offerId,
+    )
+    const existing =
+      existingIndex !== -1 ? (this.segments[existingIndex] as EscalationOfferSegment) : undefined
+
+    const segment: EscalationOfferSegment = {
+      type: 'escalation_offer',
+      // The resolved chunk carries no text/origin — a redelivered offer must
+      // not blank the card the PENDING chunk already painted.
+      data: { offerId, text: text || existing?.data.text || '', origin: origin ?? existing?.data.origin },
+      status,
+      resolvedByName: resolvedByName ?? existing?.resolvedByName,
+      onApprove: this.callbacks.onEscalationApprove,
+      onReject: this.callbacks.onEscalationReject,
+    }
+
+    if (existingIndex !== -1) {
+      this.segments[existingIndex] = segment
+      return this.getSegments()
+    }
+
+    this.segments.push(segment)
+    return this.getSegments()
+  }
+
+  /**
+   * Add the handoff receipt. Upserts by `ticketId` so a redelivered block
+   * (JetStream catch-up over hydrated history) can't stack a second notice.
+   */
+  addTicketEscalated(data: TicketEscalatedData): MessageSegment[] {
+    const segment: TicketEscalatedSegment = { type: 'ticket_escalated', data }
+    const existingIndex = this.segments.findIndex(
+      (s) => s.type === 'ticket_escalated' && s.data.ticketId === data.ticketId,
+    )
+    if (existingIndex !== -1) {
+      this.segments[existingIndex] = segment
+      return this.getSegments()
+    }
+    this.segments.push(segment)
+    return this.getSegments()
+  }
+
+  /**
+   * Update status of an existing approval segment (single, batch, or
+   * escalation offer).
    * `resolvedByName` (when provided) is stamped onto the matching batch segment so the
    * resolved card shows "by {name}"; omit it to leave any existing value untouched.
    */
-  updateApprovalStatus(requestId: string, status: ChatApprovalStatus, resolvedByName?: string | null): MessageSegment[] {
+  updateApprovalStatus(
+    requestId: string,
+    status: ChatApprovalStatus,
+    resolvedByName?: string | null,
+  ): MessageSegment[] {
     // ONE rule, two containers: `applyApprovalStatusToSegment` is the
     // same predicate the message-array projection uses
     // (`projectApprovalResolutionToMessages`) — anchor status flip AND
@@ -571,6 +642,14 @@ export class MessageSegmentAccumulator {
           )
           break
         }
+        case 'escalation_offer': {
+          const { data, status, resolvedByName } = segment
+          this.addEscalationOffer(data.offerId, data.text, data.origin, status, resolvedByName)
+          break
+        }
+        case 'ticket_escalated':
+          this.addTicketEscalated(segment.data)
+          break
         case 'error':
           this.addError(segment.title, segment.details)
           break

package/src/components/chat/utils/process-historical-messages.ts

@@ -37,11 +37,12 @@ import {
   type MessageData,
   type MessageOwner,
 } from '../types'
-import type { ChatStreamEvent } from '../../../chat-protocol/events'
+import { ESCALATION_STATE, escalationResolvedStatus, type ChatStreamEvent } from '../../../chat-protocol/events'
 // One normalizer for ask rows, shared with the live decoder — history and the
 // stream must agree on which options are usable.
 import { normalizeAskOptions } from '../../../chat-protocol/nats-decoder'
 import { MessageSegmentAccumulator, createMessageSegmentAccumulator } from './message-segment-accumulator'
+import { applyApprovalStatusToSegment } from '../stream/message-mutations'
 import { getCommandText } from './tool-call-helpers'
 
 function getOwnerDisplayName(owner?: MessageOwner): string {
@@ -199,6 +200,38 @@ export function decodeHistoricalMessageData(data: MessageData): ChatStreamEvent
       }
       return null
 
+    case MESSAGE_TYPE.ESCALATION_OFFER: {
+      if (!('offerId' in data) || !data.offerId) return null
+      if (data.state === ESCALATION_STATE.PENDING) {
+        return {
+          type: 'escalation-offer',
+          offerId: data.offerId,
+          text: data.text || '',
+          origin: data.origin,
+        }
+      }
+      const status = escalationResolvedStatus(data.state)
+      if (!status) return null
+      return {
+        type: 'escalation-offer-resolved',
+        offerId: data.offerId,
+        status,
+        resolvedByName: data.resolvedByName,
+      }
+    }
+
+    case MESSAGE_TYPE.TICKET_ESCALATED:
+      if ('ticketId' in data && data.ticketId && data.reason) {
+        return {
+          type: 'ticket-escalated',
+          ticketId: data.ticketId,
+          reason: data.reason,
+          ticketNumber: data.ticketNumber,
+          text: data.text,
+        }
+      }
+      return null
+
     case MESSAGE_TYPE.ERROR:
       if ('error' in data) {
         return {
@@ -240,6 +273,18 @@ type EscalatedApprovals = Map<
   { command: string; explanation?: string; approvalType: string; toolCalls?: PendingToolCallData[] }
 >
 
+/**
+ * Terminal escalation-offer resolutions collected while walking history, so
+ * they can be applied to ALREADY-FLUSHED bubbles after the walk. The offer
+ * row and its resolution row are separated by the user message that caused
+ * SUPERSEDED, which puts them in different assistant envelopes — by the time
+ * the resolution is read, the accumulator holding the card has been reset.
+ */
+type OfferResolutions = Map<
+  string,
+  { status: ChatApprovalStatus; resolvedByName?: string | null }
+>
+
 /**
  * Replay one decoded event into the shared per-turn segment kernel with the
  * HISTORY approval semantics (an omitted `displayApprovalTypes` means
@@ -252,13 +297,43 @@ function applyHistoryEvent(
   approvalStatuses: Record<string, string>,
   options: MessageProcessingOptions,
   escalatedApprovals?: EscalatedApprovals,
+  offerResolutions?: OfferResolutions,
 ): void {
   // batchApprovalsEnabled is owned by the consumer (oss-tenant chat client /
   // openframe-frontend tickets). Defaults to ON so consumers that haven't
   // wired the flag yet get the batch UI; pass `false` to force legacy.
-  const { displayApprovalTypes, batchApprovalsEnabled = true } = options
+  const { displayApprovalTypes, batchApprovalsEnabled = true, escalationOfferStates } = options
 
   switch (event.type) {
+    case 'escalation-offer':
+      // Always a real segment, never the tracked/flushed treatment single
+      // approvals get: the offer belongs inline where it was posted.
+      accumulator.addEscalationOffer(
+        event.offerId,
+        event.text,
+        event.origin,
+        escalationOfferStates?.[event.offerId] ?? 'pending',
+      )
+      break
+
+    case 'ticket-escalated':
+      accumulator.addTicketEscalated({
+        ticketId: event.ticketId,
+        ticketNumber: event.ticketNumber,
+        reason: event.reason,
+        text: event.text,
+      })
+      break
+
+    case 'escalation-offer-resolved':
+      // Recorded, not applied here: `applyOfferResolutions` runs after every
+      // flush and covers the same-bubble case as well as the cross-bubble one.
+      offerResolutions?.set(event.offerId, {
+        status: event.status,
+        resolvedByName: event.resolvedByName,
+      })
+      break
+
     case 'text-delta':
       accumulator.appendText(event.text)
       break
@@ -464,11 +539,20 @@ export function processHistoricalMessages(
     // opt-in: pass the same explicit list to both.
     displayApprovalTypes,
     batchApprovalsEnabled,
+    escalationOfferStates,
+    onEscalationApprove,
+    onEscalationReject,
   } = options
 
   const processedMessages: ProcessedMessage[] = []
-  const accumulator = createMessageSegmentAccumulator({ onApprove, onReject })
+  const accumulator = createMessageSegmentAccumulator({
+    onApprove,
+    onReject,
+    onEscalationApprove,
+    onEscalationReject,
+  })
   const escalatedApprovals: EscalatedApprovals = new Map()
+  const offerResolutions: OfferResolutions = new Map()
 
   let currentAssistantId: string | null = null
   let currentAssistantTimestamp: Date | null = null
@@ -581,8 +665,9 @@ export function processHistoricalMessages(
           event,
           accumulator,
           approvalStatuses,
-          { displayApprovalTypes, batchApprovalsEnabled },
+          { displayApprovalTypes, batchApprovalsEnabled, escalationOfferStates },
           escalatedApprovals,
+          offerResolutions,
         )
       })
 
@@ -614,12 +699,46 @@ export function processHistoricalMessages(
     })
   }
 
+  applyOfferResolutions(processedMessages, offerResolutions)
+
   return {
     messages: processedMessages,
     escalatedApprovals: escalatedApprovals
   }
 }
 
+/**
+ * Flip escalation-offer cards that were flushed into an EARLIER bubble than
+ * their resolution row. Mutates `processedMessages` in place (it is local to
+ * the caller and not yet handed out). Uses the same `applyApprovalStatusToSegment`
+ * rule as the live projection so the two paths cannot drift.
+ */
+function applyOfferResolutions(
+  processedMessages: ProcessedMessage[],
+  offerResolutions: OfferResolutions,
+): void {
+  if (offerResolutions.size === 0) return
+
+  processedMessages.forEach((msg, index) => {
+    if (!Array.isArray(msg.content)) return
+    let changed = false
+    const content = msg.content.map((segment) => {
+      if (segment.type !== 'escalation_offer') return segment
+      const resolution = offerResolutions.get(segment.data.offerId)
+      if (!resolution) return segment
+      const next = applyApprovalStatusToSegment(
+        segment,
+        segment.data.offerId,
+        resolution.status,
+        resolution.resolvedByName,
+      )
+      if (next !== segment) changed = true
+      return next
+    })
+    if (changed) processedMessages[index] = { ...msg, content }
+  })
+}
+
 /**
  * Extract error messages from historical messages
  * Returns a separate array of error messages that should be displayed