@flamingo-stack/openframe-frontend-core 0.0.537 → 0.0.538-1791.4733.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/components/ui/index.ts

@@ -179,6 +179,7 @@ export * from './test-run'
 export * from './assignee-dropdown'
 export * from './ticket-info-section'
 export * from './take-over-ticket-modal'
+export * from './reopen-ticket-modal'
 export * from './ticket-detail-section'
 export * from './ticket-attachments-list'
 export * from './ticket-note-card'

package/src/components/ui/reopen-ticket-modal.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import * as React from 'react';
+import { Autocomplete } from './autocomplete';
+import { Button } from './button';
+import { ColorSwatch } from './color-swatch';
+import { ModalV2, ModalV2Footer, ModalV2Header, ModalV2Title } from './modal-v2';
+import { SquareAvatar } from './square-avatar';
+import {
+  renderTicketAssigneeOption,
+  renderTicketStatusOption,
+  type TakeOverAssigneeOption,
+  type TakeOverStatusOption,
+} from './take-over-ticket-modal';
+import { Textarea } from './textarea';
+
+/** Backend trims and caps the reason at 1000 chars; cap it client-side too. */
+const REASON_MAX_LENGTH = 1000;
+
+export interface ReopenTicketSelection {
+  statusId: string;
+  /** `null` — reopen without an assignee (the ticket stays unassigned). */
+  assigneeId: string | null;
+  /** Trimmed; `null` when the field was left blank. */
+  reason: string | null;
+}
+
+export interface ReopenTicketModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /** Highlighted ticket reference in the description, e.g. "1003: Email client synchronization issues". */
+  ticketRef: string;
+  /** Allowed target statuses, in display order. Per design, the consumer
+   *  pre-selects Tech Required by default (annotation on the mock: "tech
+   *  required by default, but may be changed to custom status"). */
+  statusOptions: TakeOverStatusOption[];
+  /** Assignable users, in display order (consumer decides ordering, e.g. signed-in user first). */
+  assigneeOptions: TakeOverAssigneeOption[];
+  assigneesLoading?: boolean;
+  /** Pre-selected status; falls back to the first status option. */
+  initialStatusId?: string | null;
+  /** Pre-selected assignee. Unlike Take Over, the assignee is OPTIONAL —
+   *  a reopened ticket may stay unassigned (it is flagged for triage). */
+  initialAssigneeId?: string | null;
+  /** Confirm in-flight: buttons lock and the modal refuses to close. */
+  isPending?: boolean;
+  onConfirm: (selection: ReopenTicketSelection) => void;
+}
+
+/**
+ * Reopen Ticket dialog (Figma openframe---tickets 8456-17581): shown when a
+ * technician reopens a Resolved/Archived ticket. Same Status + Assigned pair
+ * as {@link TakeOverTicketModal} plus an optional free-text reason.
+ * Presentational — the consumer supplies the option lists, their ordering and
+ * default selections, and performs the actual reopen in `onConfirm`.
+ *
+ * Desktop footer shows only the accent Reopen button (X closes); mobile
+ * bottom-sheet adds a Cancel button, matching Take Over.
+ */
+export function ReopenTicketModal({
+  isOpen,
+  onClose,
+  ticketRef,
+  statusOptions,
+  assigneeOptions,
+  assigneesLoading,
+  initialStatusId,
+  initialAssigneeId,
+  isPending = false,
+  onConfirm,
+}: ReopenTicketModalProps) {
+  const [statusId, setStatusId] = React.useState<string | null>(null);
+  const [assigneeId, setAssigneeId] = React.useState<string | null>(null);
+  const [reason, setReason] = React.useState('');
+
+  // Re-seed the selections every time the modal opens.
+  React.useEffect(() => {
+    if (!isOpen) return;
+    setStatusId(initialStatusId ?? null);
+    setAssigneeId(initialAssigneeId ?? null);
+    setReason('');
+  }, [isOpen, initialStatusId, initialAssigneeId]);
+
+  const selectedStatusId = statusId ?? statusOptions[0]?.value ?? null;
+  const selectedStatus = statusOptions.find(o => o.value === selectedStatusId);
+  const selectedAssignee = assigneeOptions.find(o => o.value === assigneeId);
+
+  const handleConfirm = () => {
+    if (!selectedStatusId || isPending) return;
+    const trimmedReason = reason.trim();
+    onConfirm({
+      statusId: selectedStatusId,
+      assigneeId: assigneeId ?? null,
+      reason: trimmedReason ? trimmedReason.slice(0, REASON_MAX_LENGTH) : null,
+    });
+  };
+
+  return (
+    <ModalV2 isOpen={isOpen} onClose={isPending ? () => {} : onClose} className="text-left md:max-w-[600px]">
+      <ModalV2Header>
+        <ModalV2Title>Reopen Ticket</ModalV2Title>
+      </ModalV2Header>
+
+      <p className="text-h4 text-ods-text-primary">
+        The ticket <span className="text-ods-accent">{ticketRef}</span> will return to the selected status and appear on
+        the board. Assigned admins and the user will be notified.
+      </p>
+
+      <div className="flex flex-col md:flex-row gap-[var(--spacing-system-l)] w-full">
+        <div className="flex-1 min-w-0">
+          <Autocomplete
+            label="Status"
+            options={statusOptions}
+            value={selectedStatusId}
+            onChange={setStatusId}
+            placeholder="Select Status"
+            startAdornment={selectedStatus ? <ColorSwatch color={selectedStatus.color} /> : undefined}
+            renderOption={renderTicketStatusOption}
+          />
+        </div>
+        <div className="flex-1 min-w-0">
+          <Autocomplete
+            label="Assigned"
+            options={assigneeOptions}
+            value={assigneeId}
+            onChange={setAssigneeId}
+            placeholder="Select Technician"
+            loading={assigneesLoading}
+            startAdornment={
+              selectedAssignee ? (
+                <SquareAvatar
+                  src={selectedAssignee.imageUrl}
+                  alt={selectedAssignee.label}
+                  fallback={selectedAssignee.label}
+                  size="sm"
+                  variant="round"
+                />
+              ) : undefined
+            }
+            renderOption={renderTicketAssigneeOption}
+          />
+        </div>
+      </div>
+
+      <div className="w-full">
+        <Textarea
+          label="Reason"
+          value={reason}
+          onChange={event => setReason(event.target.value)}
+          placeholder="Describe what's still not working (optional)"
+          maxLength={REASON_MAX_LENGTH}
+          disabled={isPending}
+        />
+      </div>
+
+      <ModalV2Footer>
+        <Button type="button" variant="outline" onClick={onClose} disabled={isPending} className="flex-1 md:hidden">
+          Cancel
+        </Button>
+        <div className="hidden md:block flex-1" />
+        <Button
+          type="button"
+          variant="accent"
+          onClick={handleConfirm}
+          loading={isPending}
+          disabled={!selectedStatusId}
+          className="flex-1"
+        >
+          Reopen Ticket
+        </Button>
+      </ModalV2Footer>
+    </ModalV2>
+  );
+}

package/src/components/ui/take-over-ticket-modal.tsx

@@ -42,7 +42,9 @@ export interface TakeOverTicketModalProps {
   onConfirm: (selection: TakeOverTicketSelection) => void;
 }
 
-function renderStatusOption(option: AutocompleteOption, isSelected: boolean): React.ReactNode {
+/** Status row with color swatch — shared by the ticket lifecycle modals
+ *  (Take Over / Reopen), which present the same Status + Assigned pair. */
+export function renderTicketStatusOption(option: AutocompleteOption, isSelected: boolean): React.ReactNode {
   const { label, color } = option as TakeOverStatusOption;
   return (
     <div className="flex items-center justify-between w-full min-w-0 gap-[var(--spacing-system-xs)]">
@@ -57,7 +59,8 @@ function renderStatusOption(option: AutocompleteOption, isSelected: boolean): Re
   );
 }
 
-function renderAssigneeOption(option: AutocompleteOption, isSelected: boolean): React.ReactNode {
+/** Assignee row with round avatar — shared by the ticket lifecycle modals. */
+export function renderTicketAssigneeOption(option: AutocompleteOption, isSelected: boolean): React.ReactNode {
   const { label, imageUrl } = option as TakeOverAssigneeOption;
   return (
     <div className="flex items-center justify-between w-full min-w-0 gap-[var(--spacing-system-xs)]">
@@ -135,7 +138,7 @@ export function TakeOverTicketModal({
             onChange={setStatusId}
             placeholder="Select Status"
             startAdornment={selectedStatus ? <ColorSwatch color={selectedStatus.color} /> : undefined}
-            renderOption={renderStatusOption}
+            renderOption={renderTicketStatusOption}
           />
         </div>
         <div className="flex-1 min-w-0">
@@ -157,7 +160,7 @@ export function TakeOverTicketModal({
                 />
               ) : undefined
             }
-            renderOption={renderAssigneeOption}
+            renderOption={renderTicketAssigneeOption}
           />
         </div>
       </div>

package/src/stories/ReopenTicketModal.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+import { fn } from 'storybook/test';
+import { Button } from '../components/ui/button';
+import {
+  ReopenTicketModal,
+  type ReopenTicketModalProps,
+  type ReopenTicketSelection,
+} from '../components/ui/reopen-ticket-modal';
+
+const meta = {
+  title: 'UI/ReopenTicketModal',
+  component: ReopenTicketModal,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Reopen Ticket dialog (Figma openframe---tickets 8456-17581): shown when a technician reopens a ' +
+          'Resolved/Archived ticket. Same Status + Assigned pair as TakeOverTicketModal plus an optional free-text ' +
+          'reason. Unlike Take Over, the assignee is optional - a reopened ticket may stay unassigned. ' +
+          'Presentational - the consumer supplies option lists (design default pre-selects Tech Required), ' +
+          'default selections, and performs the actual reopen in onConfirm.',
+      },
+    },
+  },
+  argTypes: {
+    isPending: { control: 'boolean' },
+    assigneesLoading: { control: 'boolean' },
+  },
+} satisfies Meta<typeof ReopenTicketModal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const STATUS_OPTIONS = [
+  { value: 'todo', label: 'Todo', color: '#2890fa' },
+  { value: 'in-progress', label: 'In Progress', color: '#ffc008' },
+  { value: 'tech-required', label: 'Technician Required', color: '#f36666' },
+];
+
+const ASSIGNEE_OPTIONS = [
+  { value: 'u1', label: 'Roman Smith' },
+  { value: 'u2', label: 'Olivia Carter' },
+  { value: 'u3', label: 'James Wilson' },
+];
+
+function ControlledModal(props: Partial<ReopenTicketModalProps> & { pendingOnConfirm?: boolean }) {
+  const [isOpen, setIsOpen] = useState(true);
+  const [isPending, setIsPending] = useState(false);
+
+  const handleConfirm = (selection: ReopenTicketSelection) => {
+    props.onConfirm?.(selection);
+    if (!props.pendingOnConfirm) {
+      setIsOpen(false);
+      return;
+    }
+    // Simulate the consumer's reopen mutation round-trip.
+    setIsPending(true);
+    setTimeout(() => {
+      setIsPending(false);
+      setIsOpen(false);
+    }, 1500);
+  };
+
+  return (
+    <>
+      <Button variant="outline" onClick={() => setIsOpen(true)}>
+        Reopen Ticket
+      </Button>
+      <ReopenTicketModal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        ticketRef="1003: Email client synchronization issues"
+        statusOptions={STATUS_OPTIONS}
+        assigneeOptions={ASSIGNEE_OPTIONS}
+        {...props}
+        isPending={props.isPending ?? isPending}
+        onConfirm={handleConfirm}
+      />
+    </>
+  );
+}
+
+/** Design default: Tech Required pre-selected (mock annotation), previous assignee restored. */
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    onClose: fn(),
+    onConfirm: fn(),
+    ticketRef: '1003: Email client synchronization issues',
+    statusOptions: STATUS_OPTIONS,
+    assigneeOptions: ASSIGNEE_OPTIONS,
+    initialStatusId: 'tech-required',
+    initialAssigneeId: 'u1',
+  },
+  render: args => <ControlledModal {...args} />,
+};
+
+/**
+ * No assignee - the reopen still confirms and the ticket stays unassigned
+ * (flagged for triage). This is the deliberate difference from Take Over,
+ * where the CTA locks until a technician is picked.
+ */
+export const NoAssignee: Story = {
+  args: { ...Default.args, initialAssigneeId: null },
+  render: args => <ControlledModal {...args} />,
+};
+
+/** Confirm shows the pending state (buttons lock, modal refuses to close). */
+export const PendingOnConfirm: Story = {
+  args: { ...Default.args },
+  render: args => <ControlledModal {...args} pendingOnConfirm />,
+};

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,
+	},
+};