@flamingo-stack/openframe-frontend-core 0.0.537-snapshot.20260814101439 → 0.0.537

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.537-snapshot.20260814101439",
+  "version": "0.0.537",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/chat-protocol/__tests__/__snapshots__/nats-decoder-golden.test.ts.snap

@@ -406,50 +406,6 @@ exports[`decodeNatsChunk — golden corpus > maps the full recorded corpus to no
   },
   "ticket_escalated_missing_reason": null,
   "ticket_escalated_missing_ticket_id": null,
-  "ticket_event_blank_reason_dropped": {
-    "actorId": undefined,
-    "actorName": undefined,
-    "actorType": undefined,
-    "kind": "RESOLVED",
-    "reason": undefined,
-    "type": "ticket-event",
-  },
-  "ticket_event_missing_kind": null,
-  "ticket_event_reopened_with_reason": {
-    "actorId": "user-42",
-    "actorName": "John Smith",
-    "actorType": "CLIENT",
-    "kind": "REOPENED",
-    "reason": "The printer stopped working again",
-    "seq": 413,
-    "type": "ticket-event",
-  },
-  "ticket_event_resolved": {
-    "actorId": "fae",
-    "actorName": "Fae",
-    "actorType": "AI",
-    "kind": "RESOLVED",
-    "reason": undefined,
-    "seq": 412,
-    "type": "ticket-event",
-  },
-  "ticket_event_stream_seq_wins": {
-    "actorId": undefined,
-    "actorName": undefined,
-    "actorType": undefined,
-    "kind": "RESOLVED",
-    "reason": undefined,
-    "seq": 500,
-    "type": "ticket-event",
-  },
-  "ticket_event_unknown_kind": {
-    "actorId": undefined,
-    "actorName": "Roman Smith",
-    "actorType": undefined,
-    "kind": "ON_HOLD",
-    "reason": undefined,
-    "type": "ticket-event",
-  },
   "token_usage": {
     "contextSize": 180000,
     "inputTokensSize": 1200,

package/src/chat-protocol/__tests__/nats-decoder-golden.test.ts

@@ -257,38 +257,6 @@ const CORPUS: Record<string, unknown> = {
   ticket_escalated_missing_reason: { type: 'TICKET_ESCALATED', ticketId: 'ticket-1' },
   ticket_escalated_missing_ticket_id: { type: 'TICKET_ESCALATED', reason: 'INACTIVITY' },
 
-  // TICKET_EVENT — standalone lifecycle receipt. `kind` is an OPEN string:
-  // unknown kinds must decode (neutral render), only a missing/blank kind is
-  // malformed. The chunk names its JetStream sequence `sequenceId` in the
-  // payload; it backfills `seq` when the transport didn't stamp `streamSeq`.
-  ticket_event_resolved: {
-    type: 'TICKET_EVENT',
-    kind: 'RESOLVED',
-    actorId: 'fae',
-    actorName: 'Fae',
-    actorType: 'AI',
-    sequenceId: 412,
-  },
-  ticket_event_reopened_with_reason: {
-    type: 'TICKET_EVENT',
-    kind: 'REOPENED',
-    actorId: 'user-42',
-    actorName: 'John Smith',
-    actorType: 'CLIENT',
-    reason: 'The printer stopped working again',
-    sequenceId: 413,
-  },
-  ticket_event_unknown_kind: { type: 'TICKET_EVENT', kind: 'ON_HOLD', actorName: 'Roman Smith' },
-  ticket_event_missing_kind: { type: 'TICKET_EVENT', actorName: 'Fae' },
-  ticket_event_blank_reason_dropped: { type: 'TICKET_EVENT', kind: 'RESOLVED', reason: '   ' },
-  // Transport-stamped streamSeq wins over the payload's sequenceId copy.
-  ticket_event_stream_seq_wins: {
-    type: 'TICKET_EVENT',
-    kind: 'RESOLVED',
-    streamSeq: 500,
-    sequenceId: 499,
-  },
-
   approval_result_approved: {
     type: 'APPROVAL_RESULT',
     approvalRequestId: 'req-1',

package/src/chat-protocol/events.ts

@@ -251,21 +251,6 @@ export interface TicketEscalatedEvent extends ChatStreamEventBase {
   text?: string
 }
 
-/** Ticket lifecycle receipt (`TICKET_EVENT`) — the ticket was resolved,
- *  reopened, etc. `kind` is an OPEN vocabulary (RESOLVED/REOPENED today):
- *  an unknown kind still decodes and renders as a neutral line rather than
- *  being dropped, so the backend can add kinds without a client release.
- *  Arrives standalone (outside MESSAGE_START/END), like `ticket-escalated`. */
-export interface TicketEventEvent extends ChatStreamEventBase {
-  type: 'ticket-event'
-  kind: string
-  actorId?: string
-  actorName?: string
-  /** Who acted — e.g. an AI agent vs a human technician. Open string. */
-  actorType?: string
-  reason?: string
-}
-
 /** Per-turn metadata. Raw wire values pass through UNVALIDATED — the
  *  consumer replicates the legacy truthiness/typeof gates (so a
  *  malformed frame degrades identically to the pre-SSOT parser). */
@@ -380,7 +365,6 @@ export type ChatStreamEvent =
   | EscalationOfferEvent
   | EscalationOfferResolvedEvent
   | TicketEscalatedEvent
-  | TicketEventEvent
   | ChatMetadataEvent
   | UsageEvent
   | TokenUsageEvent

package/src/chat-protocol/nats-decoder.ts

@@ -370,33 +370,6 @@ export function decodeNatsChunk(chunk: unknown): ChatStreamEvent | null {
       }
     }
 
-    case MESSAGE_TYPE.TICKET_EVENT: {
-      // `kind` is the only required field, and deliberately an OPEN string:
-      // unknown kinds must render (as a neutral line), not be dropped.
-      const kind = typeof data.kind === 'string' ? data.kind.trim() : ''
-      if (!kind) return null
-      // This chunk names its own JetStream sequence `sequenceId` in the
-      // payload (the persisted row's `lastChunkStreamSeq` equals it — the
-      // dedupe key). Prefer the transport-stamped `streamSeq` envelope like
-      // every other chunk; fall back to the payload copy when absent.
-      const eventSeq: { seq?: number } =
-        seq.seq !== undefined
-          ? seq
-          : typeof data.sequenceId === 'number'
-            ? { seq: data.sequenceId }
-            : {}
-      return {
-        type: 'ticket-event',
-        kind,
-        actorId: typeof data.actorId === 'string' ? data.actorId : undefined,
-        actorName: typeof data.actorName === 'string' ? data.actorName : undefined,
-        actorType: typeof data.actorType === 'string' ? data.actorType : undefined,
-        reason:
-          typeof data.reason === 'string' && data.reason.trim() ? data.reason : undefined,
-        ...eventSeq,
-      }
-    }
-
     case MESSAGE_TYPE.ERROR:
       return {
         type: 'error',

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

@@ -10,7 +10,6 @@ import { ApprovalRequestMessage } from "./approval-request-message"
 import { ApprovalBatchMessage } from "./approval-batch-message"
 import { EscalationOfferMessage } from "./escalation-offer-message"
 import { TicketEscalatedMessage } from "./ticket-escalated-message"
-import { TicketEventMessage } from "./ticket-event-message"
 import { ErrorMessageDisplay } from "./error-message-display"
 import { ContextCompactionDisplay } from "./context-compaction-display"
 import { ThinkingDisplay } from "./thinking-display"
@@ -651,8 +650,6 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
                   )
                 } else if (segment.type === 'ticket_escalated') {
                   return <TicketEscalatedMessage key={index} data={segment.data} timestamp={timestamp} />
-                } else if (segment.type === 'ticket_event') {
-                  return <TicketEventMessage key={index} data={segment.data} timestamp={timestamp} />
                 } else if (segment.type === 'error') {
                   return (
                     <ErrorMessageDisplay

package/src/components/chat/index.ts

@@ -5,8 +5,6 @@ export * from './approval-request-message'
 export * from './approval-batch-message'
 export * from './escalation-offer-message'
 export * from './ticket-escalated-message'
-export * from './ticket-event-message'
-export * from './ai-assistant-info'
 export * from './context-compaction-display'
 export * from './expand-chevron'
 export * from './thinking-display'

package/src/components/chat/stream/chat-stream-reducer.ts

@@ -1364,25 +1364,6 @@ export function createChatStreamReducer(
         break
       }
 
-      case 'ticket-event': {
-        // Standalone chunk outside MESSAGE_START/END — same routing as
-        // `ticket-escalated`. `seq` rides onto the segment: it is the event's
-        // dedupe identity (see `addTicketEvent`).
-        const before = accumulator.getSegments().length
-        const segments = accumulator.addTicketEvent(
-          {
-            kind: event.kind,
-            actorId: event.actorId,
-            actorName: event.actorName,
-            actorType: event.actorType,
-            reason: event.reason,
-          },
-          seq,
-        )
-        applyAccumulated(before, segments)
-        break
-      }
-
       case 'error': {
         let message: string | undefined
         if (event.details) {

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

@@ -96,11 +96,6 @@ function upsertKey(seg: MessageSegment): string | null {
       return `offer:${seg.data.offerId}`
     case 'ticket_escalated':
       return `escalated:${seg.data.ticketId}`
-    case 'ticket_event':
-      // The stream sequence is the event's only stable id; a seq-less segment
-      // (hydrated history) is pushed raw — `addTicketEvent`'s payload-equality
-      // upsert owns that case.
-      return seg.streamSeq !== undefined ? `ticket-event:${seg.streamSeq}` : null
     default:
       return null
   }

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

@@ -1,8 +1,9 @@
 "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 { AiAssistantInfo } from "./ai-assistant-info"
 import type { TicketEscalatedSegment } from "./types/message.types"
 
 const TITLE = "Handed Off to a Technician"
@@ -18,25 +19,46 @@ export interface TicketEscalatedMessageProps extends HTMLAttributes<HTMLDivEleme
 
 /**
  * Handoff receipt — the conversation now belongs to a human technician.
- * Figma `ai-assistant-info` (type=escalation); chrome and the wrapping/
- * truncation trade-offs live in the shared `AiAssistantInfo` shell.
+ * 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>(
-  ({ data, timestamp, ...props }, ref) => {
+  ({ className, data, timestamp, ...props }, ref) => {
     const body = data.text?.trim() || DEFAULT_BODY
     return (
-      <AiAssistantInfo
+      <div
         ref={ref}
-        icon={<InfoCircleIcon className="size-6 text-ods-flamingo-pink" />}
-        title={TITLE}
-        body={body}
-        timestamp={timestamp}
+        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>
     )
   },
 )

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

@@ -18,7 +18,6 @@ export const MESSAGE_TYPE = {
   APPROVAL_RESULT: 'APPROVAL_RESULT',
   ESCALATION_OFFER: 'ESCALATION_OFFER',
   TICKET_ESCALATED: 'TICKET_ESCALATED',
-  TICKET_EVENT: 'TICKET_EVENT',
   ERROR: 'ERROR',
   MESSAGE_START: 'MESSAGE_START',
   MESSAGE_END: 'MESSAGE_END',
@@ -159,34 +158,6 @@ export interface TicketEscalatedData {
   text?: string
 }
 
-// ========== Ticket Event Types ==========
-
-/** Known `TicketEventData.kind` values. The vocabulary is OPEN on the wire:
- *  an unknown kind still renders (as a neutral info line) rather than being
- *  dropped, so the backend can add lifecycle kinds without a client release. */
-export const TICKET_EVENT_KIND = {
-  RESOLVED: 'RESOLVED',
-  REOPENED: 'REOPENED',
-} as const
-
-export type TicketEventKind =
-  | typeof TICKET_EVENT_KIND[keyof typeof TICKET_EVENT_KIND]
-  | (string & {})
-
-/** Ticket lifecycle receipt (`TICKET_EVENT`) — the ticket was resolved,
- *  reopened, etc. Same field names live (NATS chunk) and persisted
- *  (GraphQL `TicketEventData` inside `messageData`), so ONE mapper covers
- *  both paths. All actor fields are optional: the event stays renderable
- *  when the backend can't attribute it. */
-export interface TicketEventData {
-  kind: TicketEventKind
-  actorId?: string
-  actorName?: string
-  /** Who acted — e.g. an AI agent vs a human. Open string like `kind`. */
-  actorType?: string
-  reason?: string
-}
-
 /**
  * Single tool call inside a batch approval request.
  * Mirrors backend PendingToolCallDto.
@@ -339,23 +310,6 @@ export type TicketEscalatedSegment = {
   data: TicketEscalatedData
 }
 
-/**
- * Ticket lifecycle receipt (resolved / reopened / an unknown future kind).
- * Arrives as a standalone `TICKET_EVENT` chunk outside MESSAGE_START/END —
- * same delivery shape as `ticket_escalated`.
- *
- * `streamSeq` is the chunk's JetStream sequence, kept ON the segment because
- * it is the event's only stable identity: the accumulator upserts on it so a
- * redelivered chunk (catch-up over hydrated history) replaces rather than
- * stacks a second card, while two genuinely distinct events of the same kind
- * (resolve → reopen → resolve) keep distinct sequences and both render.
- */
-export type TicketEventSegment = {
-  type: 'ticket_event'
-  data: TicketEventData
-  streamSeq?: number
-}
-
 export type ErrorSegment = {
   type: 'error'
   title: string
@@ -368,7 +322,7 @@ export type ContextCompactionSegment = {
   summary?: string
 }
 
-export type MessageSegment = TextSegment | ThinkingSegment | GuideSegment | AskSegment | ToolExecutionSegment | ApprovalRequestSegment | ApprovalBatchSegment | EscalationOfferSegment | TicketEscalatedSegment | TicketEventSegment | ErrorSegment | ContextCompactionSegment
+export type MessageSegment = TextSegment | ThinkingSegment | GuideSegment | AskSegment | ToolExecutionSegment | ApprovalRequestSegment | ApprovalBatchSegment | EscalationOfferSegment | TicketEscalatedSegment | ErrorSegment | ContextCompactionSegment
 
 export type MessageContent = string | MessageSegment[]
 
@@ -473,18 +427,6 @@ export interface TicketEscalatedMessageData extends MessageDataBase {
   text?: string
 }
 
-/** Persisted ticket lifecycle row — same field names as the live chunk
- *  (see `TicketEventData`), decoded by the SAME mapper on replay. Fields are
- *  wire-shaped (`| null`): every one is a nullable GraphQL scalar. */
-export interface TicketEventMessageData extends MessageDataBase {
-  type: 'TICKET_EVENT'
-  kind?: string | null
-  actorId?: string | null
-  actorName?: string | null
-  actorType?: string | null
-  reason?: string | null
-}
-
 export interface ErrorMessageData extends MessageDataBase {
   type: 'ERROR'
   error?: string
@@ -531,7 +473,6 @@ export type MessageData =
   | ApprovalResultMessageData
   | EscalationOfferMessageData
   | TicketEscalatedMessageData
-  | TicketEventMessageData
   | ErrorMessageData
   | AIMetadataMessageData
   | SystemMessageData

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

@@ -20,8 +20,6 @@ import type {
   EscalationOfferSegment,
   TicketEscalatedData,
   TicketEscalatedSegment,
-  TicketEventData,
-  TicketEventSegment,
   ContextCompactionSegment,
   ErrorSegment,
   PendingApproval,
@@ -537,42 +535,6 @@ export class MessageSegmentAccumulator {
     return this.getSegments()
   }
 
-  /**
-   * Add a ticket lifecycle receipt (resolved / reopened / unknown kind).
-   *
-   * Upsert identity is the chunk's stream sequence when BOTH sides know it;
-   * otherwise full payload equality. History-hydrated segments come back
-   * seq-less (the persisted row's seq lives on the message, not the
-   * `messageData`), so a JetStream catch-up redelivery of the same event must
-   * still match its hydrated twin — payload equality is what catches that.
-   * Two genuinely distinct events (resolve → reopen → resolve) differ in seq
-   * or payload and both render.
-   */
-  addTicketEvent(data: TicketEventData, streamSeq?: number): MessageSegment[] {
-    const segment: TicketEventSegment = {
-      type: 'ticket_event',
-      data,
-      ...(streamSeq !== undefined ? { streamSeq } : {}),
-    }
-    const existingIndex = this.segments.findIndex((s) => {
-      if (s.type !== 'ticket_event') return false
-      if (s.streamSeq !== undefined && streamSeq !== undefined) return s.streamSeq === streamSeq
-      return (
-        s.data.kind === data.kind &&
-        s.data.actorId === data.actorId &&
-        s.data.actorName === data.actorName &&
-        s.data.actorType === data.actorType &&
-        s.data.reason === data.reason
-      )
-    })
-    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).
@@ -718,9 +680,6 @@ export class MessageSegmentAccumulator {
         case 'ticket_escalated':
           this.addTicketEscalated(segment.data)
           break
-        case 'ticket_event':
-          this.addTicketEvent(segment.data, segment.streamSeq)
-          break
         case 'error':
           this.addError(segment.title, segment.details)
           break

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

@@ -243,23 +243,6 @@ export function decodeHistoricalMessageData(data: MessageData): ChatStreamEvent
       }
       return null
 
-    // Same completeness gate as the live decoder: `kind` (an OPEN string —
-    // unknown kinds render as a neutral line) is the only required field.
-    // Field names match the chunk, so ONE mapping covers both paths; the
-    // typeof gates also fold the row's GraphQL nulls to undefined.
-    case MESSAGE_TYPE.TICKET_EVENT: {
-      const kind = 'kind' in data && typeof data.kind === 'string' ? data.kind.trim() : ''
-      if (!kind) return null
-      return {
-        type: 'ticket-event',
-        kind,
-        actorId: typeof data.actorId === 'string' ? data.actorId : undefined,
-        actorName: typeof data.actorName === 'string' ? data.actorName : undefined,
-        actorType: typeof data.actorType === 'string' ? data.actorType : undefined,
-        reason: typeof data.reason === 'string' && data.reason.trim() ? data.reason : undefined,
-      }
-    }
-
     case MESSAGE_TYPE.ERROR:
       if ('error' in data) {
         return {
@@ -353,20 +336,6 @@ function applyHistoryEvent(
       })
       break
 
-    // Seq-less on purpose: the persisted row's sequence lives on the message
-    // (`lastChunkStreamSeq`), not in `messageData`. A live redelivery of the
-    // same event matches this segment by payload equality (see
-    // `addTicketEvent`).
-    case 'ticket-event':
-      accumulator.addTicketEvent({
-        kind: event.kind,
-        actorId: event.actorId,
-        actorName: event.actorName,
-        actorType: event.actorType,
-        reason: event.reason,
-      })
-      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.