@flamingo-stack/openframe-frontend-core 0.0.537 → 0.0.538-1791.4733.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.537",
+  "version": "0.0.538-1791.4733.1",
   "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,6 +406,50 @@ 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,6 +257,38 @@ 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,6 +251,21 @@ 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). */
@@ -365,6 +380,7 @@ export type ChatStreamEvent =
   | EscalationOfferEvent
   | EscalationOfferResolvedEvent
   | TicketEscalatedEvent
+  | TicketEventEvent
   | ChatMetadataEvent
   | UsageEvent
   | TokenUsageEvent

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

@@ -370,6 +370,33 @@ 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/__tests__/ticket-event.test.ts

@@ -0,0 +1,194 @@
+/**
+ * TICKET_EVENT — the ticket lifecycle receipt (resolved / reopened / open
+ * vocabulary), across both the live NATS path and history replay.
+ *
+ * The behaviours worth pinning:
+ *   - the chunk arrives STANDALONE (no MESSAGE_START at all — resolution can
+ *     fire from a PSA-side action with no turn open), so it must mint/append
+ *     to the trailing bubble like `ticket-escalated` does;
+ *   - dedupe identity is the stream sequence, with payload-equality as the
+ *     fallback for the hydrate-then-catch-up overlap where the hydrated twin
+ *     is seq-less (the persisted row's seq lives on the message, not in
+ *     `messageData`);
+ *   - `kind` is OPEN: an unknown kind decodes and renders, only a missing
+ *     kind is malformed.
+ */
+
+import { describe, expect, it } from 'vitest'
+import { decodeNatsChunk } from '../../../chat-protocol/nats-decoder'
+import { createChatStreamReducer } from '../stream/chat-stream-reducer'
+import { MessageSegmentAccumulator } from '../utils/message-segment-accumulator'
+import { processHistoricalMessages } from '../utils/process-historical-messages'
+import type { HistoricalMessage, MessageSegment, TicketEventSegment } from '../types'
+
+const resolvedChunk = (streamSeq: number, over: Record<string, unknown> = {}) => ({
+  type: 'TICKET_EVENT',
+  kind: 'RESOLVED',
+  actorId: 'fae',
+  actorName: 'Fae',
+  actorType: 'AI',
+  streamSeq,
+  ...over,
+})
+
+const events = (segments: MessageSegment[] | string | undefined): TicketEventSegment[] =>
+  Array.isArray(segments)
+    ? (segments.filter((s) => s.type === 'ticket_event') as TicketEventSegment[])
+    : []
+
+describe('decodeNatsChunk — TICKET_EVENT', () => {
+  it('decodes the resolution receipt with its actor fields', () => {
+    expect(decodeNatsChunk(resolvedChunk(7))).toEqual({
+      type: 'ticket-event',
+      kind: 'RESOLVED',
+      actorId: 'fae',
+      actorName: 'Fae',
+      actorType: 'AI',
+      reason: undefined,
+      seq: 7,
+    })
+  })
+
+  it('falls back to the payload `sequenceId` when the transport did not stamp `streamSeq`', () => {
+    const event = decodeNatsChunk({ type: 'TICKET_EVENT', kind: 'REOPENED', sequenceId: 42 })
+    expect(event).toMatchObject({ type: 'ticket-event', seq: 42 })
+  })
+
+  it('prefers the transport-stamped `streamSeq` over the payload copy', () => {
+    expect(decodeNatsChunk(resolvedChunk(500, { sequenceId: 499 }))).toMatchObject({ seq: 500 })
+  })
+
+  it('keeps unknown kinds — the vocabulary is open', () => {
+    expect(decodeNatsChunk({ type: 'TICKET_EVENT', kind: 'ON_HOLD', streamSeq: 1 })).toMatchObject({
+      type: 'ticket-event',
+      kind: 'ON_HOLD',
+    })
+  })
+
+  it('drops only a chunk with no kind at all', () => {
+    expect(decodeNatsChunk({ type: 'TICKET_EVENT', streamSeq: 1 })).toBeNull()
+    expect(decodeNatsChunk({ type: 'TICKET_EVENT', kind: '  ', streamSeq: 1 })).toBeNull()
+  })
+})
+
+describe('chat stream reducer — ticket event', () => {
+  const trailingSegments = (reducer: ReturnType<typeof createChatStreamReducer>): MessageSegment[] => {
+    const { messages } = reducer.state
+    return messages[messages.length - 1]?.segments ?? []
+  }
+
+  const feed = (reducer: ReturnType<typeof createChatStreamReducer>, chunks: unknown[]) => {
+    for (const chunk of chunks) {
+      const event = decodeNatsChunk(chunk)
+      if (event) reducer.apply(event)
+    }
+  }
+
+  it('renders a receipt arriving with no turn open at all', () => {
+    const reducer = createChatStreamReducer({ transport: 'nats' })
+    feed(reducer, [resolvedChunk(1)])
+    expect(events(trailingSegments(reducer))).toHaveLength(1)
+  })
+
+  it('appends to the trailing bubble without wiping the reply the user is reading', () => {
+    const reducer = createChatStreamReducer({ transport: 'nats' })
+    feed(reducer, [
+      { type: 'MESSAGE_START', streamSeq: 1 },
+      { type: 'TEXT', text: 'Excellent! Feel free to reach out.', streamSeq: 2 },
+      { type: 'MESSAGE_END', streamSeq: 3 },
+      resolvedChunk(4),
+    ])
+    const segments = trailingSegments(reducer)
+    expect(segments.find((s: MessageSegment) => s.type === 'text')).toMatchObject({
+      text: 'Excellent! Feel free to reach out.',
+    })
+    expect(events(segments)).toHaveLength(1)
+  })
+
+  it('is idempotent across a redelivered chunk (JetStream catch-up)', () => {
+    const reducer = createChatStreamReducer({ transport: 'nats' })
+    feed(reducer, [resolvedChunk(2), { type: 'MESSAGE_END', streamSeq: 3 }])
+    // A replay re-decodes the same chunk; the seq gate drops it, but the
+    // upsert must hold even if the gate ever moves.
+    const event = decodeNatsChunk(resolvedChunk(2))
+    if (event) reducer.apply(event)
+    expect(events(trailingSegments(reducer))).toHaveLength(1)
+  })
+
+  it('keeps distinct lifecycle events distinct (resolve → reopen → resolve)', () => {
+    const reducer = createChatStreamReducer({ transport: 'nats' })
+    feed(reducer, [
+      resolvedChunk(1),
+      { type: 'TICKET_EVENT', kind: 'REOPENED', reason: 'Still broken', streamSeq: 2 },
+      resolvedChunk(3, { actorName: 'Roman Smith', actorType: 'TECHNICIAN', actorId: 'u-1' }),
+    ])
+    expect(events(trailingSegments(reducer))).toHaveLength(3)
+  })
+})
+
+describe('accumulator — hydrate/catch-up overlap', () => {
+  it('matches a seq-less hydrated twin by payload equality instead of stacking', () => {
+    const accumulator = new MessageSegmentAccumulator()
+    // Hydrated from history: the persisted row's seq lives on the message,
+    // so the restored segment carries none.
+    accumulator.addTicketEvent({ kind: 'RESOLVED', actorId: 'fae', actorName: 'Fae', actorType: 'AI' })
+    // The same event redelivered live, now with its stream sequence.
+    const segments = accumulator.addTicketEvent(
+      { kind: 'RESOLVED', actorId: 'fae', actorName: 'Fae', actorType: 'AI' },
+      412,
+    )
+    const rendered = events(segments)
+    expect(rendered).toHaveLength(1)
+    expect(rendered[0].streamSeq).toBe(412)
+  })
+
+  it('does NOT collapse two different events of the same kind', () => {
+    const accumulator = new MessageSegmentAccumulator()
+    accumulator.addTicketEvent({ kind: 'RESOLVED', actorName: 'Fae', actorType: 'AI' }, 1)
+    const segments = accumulator.addTicketEvent(
+      { kind: 'RESOLVED', actorName: 'Roman Smith', actorType: 'TECHNICIAN' },
+      9,
+    )
+    expect(events(segments)).toHaveLength(2)
+  })
+})
+
+describe('processHistoricalMessages — ticket event', () => {
+  const historyRow = (id: string, data: Record<string, unknown>): HistoricalMessage => ({
+    id,
+    createdAt: '2026-08-06T12:00:00Z',
+    owner: { type: 'ASSISTANT' },
+    messageData: [data as never],
+  })
+
+  it('replays the persisted row through the same mapper as the live path', () => {
+    const { messages } = processHistoricalMessages([
+      historyRow('m1', {
+        type: 'TICKET_EVENT',
+        kind: 'REOPENED',
+        actorId: 'user-42',
+        actorName: 'John Smith',
+        actorType: 'CLIENT',
+        reason: 'The printer stopped working again',
+      }),
+    ])
+    expect(messages).toHaveLength(1)
+    expect(events(messages[0].content)[0]).toMatchObject({
+      data: { kind: 'REOPENED', reason: 'The printer stopped working again' },
+    })
+  })
+
+  it('keeps an unknown persisted kind renderable', () => {
+    const { messages } = processHistoricalMessages([
+      historyRow('m1', { type: 'TICKET_EVENT', kind: 'ON_HOLD' }),
+    ])
+    expect(events(messages[0]?.content ?? [])).toHaveLength(1)
+  })
+
+  it('skips a malformed row with no kind', () => {
+    const { messages } = processHistoricalMessages([
+      historyRow('m1', { type: 'TICKET_EVENT', actorName: 'Fae' }),
+    ])
+    expect(messages.flatMap((m) => events(m.content))).toHaveLength(0)
+  })
+})

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

@@ -0,0 +1,71 @@
+"use client"
+
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react"
+import { cn } from "../../utils/cn"
+import { formatTime } from "../../utils/format-date"
+
+export interface AiAssistantInfoProps extends HTMLAttributes<HTMLDivElement> {
+  /** Rendered inside the standard 48px framed box (typically a 24px icon). */
+  icon?: ReactNode
+  /** Replaces the framed icon box entirely (e.g. a round 48px avatar for the
+   *  `direct-chat` variant). Wins over `icon` when both are set. */
+  leading?: ReactNode
+  title: string
+  /** Secondary line under the title. Omitted → the row is title-only. */
+  body?: ReactNode
+  /** Timestamp of the message row this block came in on. */
+  timestamp?: Date
+}
+
+/**
+ * Figma `ai-assistant-info` — the shared in-thread status card: a framed
+ * icon (or avatar), a title with a right-aligned time, and a secondary line.
+ * One presentational shell for every lifecycle receipt in a chat thread
+ * (handoff, technician joined, ticket resolved/reopened, …); the per-event
+ * components (`TicketEscalatedMessage`, `TicketEventMessage`) own the copy
+ * and icon choice and delegate the chrome here.
+ *
+ * The body WRAPS, deliberately diverging from the mock's single-line
+ * ellipsis: the mock's 72px comes from its placeholder copy fitting one
+ * line, while real wire text is a full sentence, and clipping the only
+ * explanation of a lifecycle change is not recoverable on touch. The title
+ * still truncates — it holds one line so the timestamp is never pushed out
+ * of the row at narrow widths.
+ */
+const AiAssistantInfo = forwardRef<HTMLDivElement, AiAssistantInfoProps>(
+  ({ className, icon, leading, title, body, timestamp, ...props }, ref) => {
+    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}
+      >
+        {leading ?? (
+          <div className="flex size-12 shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-bg">
+            {icon}
+          </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>
+          {body != null && body !== "" && (
+            <p className="text-h4 w-full break-words text-ods-text-secondary">{body}</p>
+          )}
+        </div>
+      </div>
+    )
+  },
+)
+
+AiAssistantInfo.displayName = "AiAssistantInfo"
+
+export { AiAssistantInfo }

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

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

@@ -0,0 +1,79 @@
+"use client"
+
+import { forwardRef, type HTMLAttributes } from "react"
+import { CheckCircleIcon, InfoCircleIcon } from "../icons-v2-generated"
+import { AiAssistantInfo } from "./ai-assistant-info"
+import { TICKET_EVENT_KIND, type TicketEventSegment } from "./types/message.types"
+
+/** Actor types the backend uses for the AI agent. Open set on the wire —
+ *  compared case-insensitively; anything else is treated as a human. */
+const AI_ACTOR_TYPES = new Set(["AI", "AGENT", "ASSISTANT", "BOT"])
+
+function isAiActor(actorType?: string): boolean {
+  return !!actorType && AI_ACTOR_TYPES.has(actorType.toUpperCase())
+}
+
+/** `TICKET_ON_HOLD` → `Ticket On Hold` — neutral title for kinds this build
+ *  does not know, which must still render (the vocabulary is open). */
+function humanizeKind(kind: string): string {
+  return kind
+    .split(/[_\s-]+/)
+    .filter(Boolean)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(" ")
+}
+
+export interface TicketEventMessageProps extends HTMLAttributes<HTMLDivElement> {
+  data: TicketEventSegment['data']
+  /** Timestamp of the message row this block came in on. */
+  timestamp?: Date
+}
+
+/**
+ * Ticket lifecycle receipt — resolved / reopened / an unknown future kind.
+ * Figma `ai-assistant-info` (type=resolved-fae | resolved-tech |
+ * reopened-fae | reopened-tech | reopened-reason).
+ *
+ * Copy is composed client-side from the event's fields (unlike
+ * `ticket_escalated`, whose body the backend authors):
+ *   RESOLVED → "Resolved by {actorName}." under a green check;
+ *   REOPENED → the reason when the wire carries one, otherwise who picks the
+ *     conversation up next, inferred from `actorType` (an AI actor keeps
+ *     assisting; anything else means a technician will reply);
+ *   unknown kind → a neutral info line: humanized kind as the title, the
+ *     reason or actor as the body. Never dropped — the vocabulary is open.
+ */
+const TicketEventMessage = forwardRef<HTMLDivElement, TicketEventMessageProps>(
+  ({ data, timestamp, ...props }, ref) => {
+    const { kind, actorName, actorType, reason } = data
+    const resolved = kind === TICKET_EVENT_KIND.RESOLVED
+    const reopened = kind === TICKET_EVENT_KIND.REOPENED
+
+    const title = resolved ? "Ticket Resolved" : reopened ? "Ticket Reopened" : humanizeKind(kind)
+
+    let body: string | undefined
+    if (resolved) {
+      body = actorName ? `Resolved by ${actorName}.` : "The ticket has been resolved."
+    } else if (reopened) {
+      body = reason
+        ? `Reason: ${reason}`
+        : isAiActor(actorType)
+          ? `${actorName || "Fae"} will continue assisting in this conversation.`
+          : "A technician will reply when available."
+    } else {
+      body = reason || (actorName ? `By ${actorName}.` : undefined)
+    }
+
+    const icon = resolved ? (
+      <CheckCircleIcon className="size-6 text-ods-attention-green-success" />
+    ) : (
+      <InfoCircleIcon className="size-6 text-ods-flamingo-pink" />
+    )
+
+    return <AiAssistantInfo ref={ref} icon={icon} title={title} body={body} timestamp={timestamp} {...props} />
+  },
+)
+
+TicketEventMessage.displayName = "TicketEventMessage"
+
+export { TicketEventMessage }