@flamingo-stack/openframe-frontend-core 0.0.535 → 0.0.536-1768.4650.1

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

@@ -18,6 +18,7 @@ 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',
@@ -158,6 +159,34 @@ 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.
@@ -310,6 +339,23 @@ 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
@@ -322,7 +368,7 @@ export type ContextCompactionSegment = {
   summary?: string
 }
 
-export type MessageSegment = TextSegment | ThinkingSegment | GuideSegment | AskSegment | ToolExecutionSegment | ApprovalRequestSegment | ApprovalBatchSegment | EscalationOfferSegment | TicketEscalatedSegment | ErrorSegment | ContextCompactionSegment
+export type MessageSegment = TextSegment | ThinkingSegment | GuideSegment | AskSegment | ToolExecutionSegment | ApprovalRequestSegment | ApprovalBatchSegment | EscalationOfferSegment | TicketEscalatedSegment | TicketEventSegment | ErrorSegment | ContextCompactionSegment
 
 export type MessageContent = string | MessageSegment[]
 
@@ -427,6 +473,18 @@ 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
@@ -473,6 +531,7 @@ export type MessageData =
   | ApprovalResultMessageData
   | EscalationOfferMessageData
   | TicketEscalatedMessageData
+  | TicketEventMessageData
   | ErrorMessageData
   | AIMetadataMessageData
   | SystemMessageData

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

@@ -20,6 +20,8 @@ import type {
   EscalationOfferSegment,
   TicketEscalatedData,
   TicketEscalatedSegment,
+  TicketEventData,
+  TicketEventSegment,
   ContextCompactionSegment,
   ErrorSegment,
   PendingApproval,
@@ -535,6 +537,42 @@ 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).
@@ -680,6 +718,9 @@ 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,6 +243,23 @@ 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 {
@@ -336,6 +353,20 @@ 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.

package/src/stories/TicketEventMessage.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import type React from "react";
+
+import { TicketEventMessage } from "../components/chat/ticket-event-message";
+
+/**
+ * `ticket_event` message segment — the ticket lifecycle receipt (Figma:
+ * `ai-assistant-info`, types resolved-fae / resolved-tech / reopened-fae /
+ * reopened-tech / reopened-reason).
+ *
+ * Decoded from the standalone `TICKET_EVENT` chunk (live) or the persisted
+ * `TicketEventData` row (history). `kind` is an OPEN vocabulary: unknown
+ * kinds render as a neutral info line rather than being dropped, so the
+ * backend can add lifecycle kinds without a client release.
+ */
+
+/** Fixed so the timestamp doesn't churn between snapshots. */
+const TIMESTAMP = new Date("2026-08-07T14:47:00");
+
+const plainDecorator = (Story: React.ComponentType) => (
+	<div style={{ maxWidth: 600, background: "var(--color-bg)" }} className="p-4">
+		<Story />
+	</div>
+);
+
+const meta = {
+	title: "Chat/Client/TicketEventMessage",
+	component: TicketEventMessage,
+	tags: ["autodocs"],
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Renders a `TICKET_EVENT` block: a green check for RESOLVED, a pink info tile for REOPENED and for any kind this build doesn't know, with copy composed from the event's actor and reason fields.",
+			},
+		},
+	},
+	decorators: [plainDecorator],
+} satisfies Meta<typeof TicketEventMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Fae (the AI agent) resolved the ticket — Figma type=resolved-fae. */
+export const ResolvedByFae: Story = {
+	args: {
+		data: { kind: "RESOLVED", actorId: "fae", actorName: "Fae", actorType: "AI" },
+		timestamp: TIMESTAMP,
+	},
+};
+
+/** A human technician resolved the ticket — Figma type=resolved-tech. */
+export const ResolvedByTechnician: Story = {
+	args: {
+		data: { kind: "RESOLVED", actorId: "u-42", actorName: "Roman Smith", actorType: "TECHNICIAN" },
+		timestamp: TIMESTAMP,
+	},
+};
+
+/** Reopened with the user's stated reason — Figma type=reopened-reason. */
+export const ReopenedWithReason: Story = {
+	args: {
+		data: {
+			kind: "REOPENED",
+			actorId: "u-7",
+			actorName: "John Smith",
+			actorType: "CLIENT",
+			reason: "The printer stopped working again",
+		},
+		timestamp: TIMESTAMP,
+	},
+};
+
+/** Reopened, no reason, AI keeps assisting — Figma type=reopened-fae. */
+export const ReopenedFaeContinues: Story = {
+	args: {
+		data: { kind: "REOPENED", actorId: "fae", actorName: "Fae", actorType: "AI" },
+		timestamp: TIMESTAMP,
+	},
+};
+
+/** Reopened, no reason, routed to a human — Figma type=reopened-tech. */
+export const ReopenedTechnicianReplies: Story = {
+	args: {
+		data: { kind: "REOPENED", actorId: "u-42", actorName: "Roman Smith", actorType: "TECHNICIAN" },
+		timestamp: TIMESTAMP,
+	},
+};
+
+/**
+ * A kind the client has never seen. The open vocabulary means the backend can
+ * add lifecycle kinds without a client release — this story is the regression
+ * guard: neutral info line, humanized title, never dropped.
+ */
+export const UnknownKind: Story = {
+	args: {
+		data: { kind: "ON_HOLD", actorName: "Roman Smith", reason: "Waiting for replacement hardware" },
+		timestamp: TIMESTAMP,
+	},
+};