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

package/src/components/features/board/ticket-card.tsx

@@ -4,7 +4,7 @@ import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import Link from '../../../embed-shims/next-link'
 import * as React from 'react'
-import { LaptopIcon, Flag02Icon, MessagesIcon } from '../../icons-v2-generated'
+import { LaptopIcon, Flag02Icon, MessagesIcon, UserCheckIcon } from '../../icons-v2-generated'
 import { DeletedUserAvatar } from '../../ui/deleted-user-avatar'
 import { SquareAvatar } from '../../ui/square-avatar'
 import { Tag } from '../../ui/tag'
@@ -119,6 +119,12 @@ export function TicketCardBody({ ticket, columnColor, renderAssignSlot, onApprov
           </Tooltip>
         </TooltipProvider>
       )}
+      {ticket.escalatedByUser && (
+        <div className="flex items-center gap-[var(--spacing-system-xxs)] text-h6 text-ods-open-yellow">
+          <UserCheckIcon className="size-4 shrink-0" />
+          <span className="truncate">Escalated by User</span>
+        </div>
+      )}
       {showNewMessage && (
         <Tag
           label="New Message"

package/src/components/features/board/types.ts

@@ -36,6 +36,13 @@ export interface BoardTicket {
   createdAt?: string
   hasNewMessage?: boolean
   pendingApproval?: BoardTicketPendingApproval
+  /**
+   * The client asked for a human and confirmed the handoff, so this ticket
+   * reached its lane by escalation rather than an inactivity auto-escalation or
+   * an admin takeover. Called out on the card because it changes how urgently a
+   * technician should pick it up.
+   */
+  escalatedByUser?: boolean
 }
 
 export interface BoardColumnDef {

package/src/stories/EscalationOfferMessage.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import type React from "react";
+
+import { EscalationOfferMessage } from "../components/chat/escalation-offer-message";
+
+/**
+ * `escalation_offer` message segment — Fae asking the client to confirm a
+ * handoff to a human technician (Figma: fae chat › "escalation to admin").
+ *
+ * Renders THROUGH the client approval card rather than reimplementing it, so
+ * it is pixel-identical to `Chat/Client/ApprovalRequestMessage` down to the
+ * Approve/Reject labels and the resolved pill. What differs is the wiring:
+ * approve/reject call the ticket-escalation GraphQL mutations, never the
+ * tool-approval endpoint — which is why it is a distinct segment type.
+ *
+ * The body copy is backend-fixed; the client never composes it. `origin`
+ * (TOOL / MANUAL / a trigger reason) is decoded for telemetry only — every
+ * origin renders the same card.
+ */
+
+const OFFER_TEXT =
+	"Having issues with the AI assistant? This ticket can be handed off to a technician. Fae will no longer respond in this conversation. A technician will review the ticket and reply when available.";
+
+const baseData = { offerId: "offer-1", text: OFFER_TEXT, origin: "MANUAL" };
+
+const plainDecorator = (Story: React.ComponentType) => (
+	<div style={{ maxWidth: 600, background: "var(--color-bg)" }} className="p-4">
+		<Story />
+	</div>
+);
+
+const meta = {
+	title: "Chat/Client/EscalationOfferMessage",
+	component: EscalationOfferMessage,
+	tags: ["autodocs"],
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Renders an `escalation_offer` segment: the backend-fixed handoff prompt with Approve/Reject, or a resolved status pill. Approve performs the handoff (ticket → Tech Required, Fae goes silent); Reject just records the choice.",
+			},
+		},
+	},
+	decorators: [plainDecorator],
+} satisfies Meta<typeof EscalationOfferMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Pending — the client has not decided yet. */
+export const Pending: Story = {
+	args: {
+		data: baseData,
+		status: "pending",
+		onApprove: () => {},
+		onReject: () => {},
+	},
+};
+
+/** Approved — the handoff ran. Paired in the thread with `TicketEscalatedMessage`. */
+export const ApprovedByUser: Story = {
+	args: { data: baseData, status: "approved", resolvedByName: "John Smith" },
+};
+
+/** Declined — the client chose to keep working with Fae. */
+export const DeclinedByUser: Story = {
+	args: { data: baseData, status: "rejected", resolvedByName: "John Smith" },
+};
+
+/**
+ * Superseded — the client typed a new message over the pending offer, which
+ * the backend treats as declining it. Maps onto the shared `cancelled` status.
+ */
+export const Superseded: Story = {
+	args: { data: baseData, status: "cancelled", resolvedByName: "John Smith" },
+};
+
+/** Raised by Fae's own `escalateToHuman` tool call rather than the header action. */
+export const FromToolCall: Story = {
+	args: {
+		data: { ...baseData, origin: "TOOL" },
+		status: "pending",
+		onApprove: () => {},
+		onReject: () => {},
+	},
+};

package/src/stories/TicketCard.stories.tsx

@@ -150,6 +150,18 @@ export const WithNewMessage: Story = {
   },
 }
 
+/**
+ * The client asked for a human and confirmed the handoff — an amber footer row
+ * distinguishing it from an inactivity auto-escalation or an admin takeover,
+ * which reach the same lane silently. Driven by the ticket's `escalatedByUser`
+ * field, not by a label.
+ */
+export const EscalatedByUser: Story = {
+  args: {
+    ticket: { ...BASE_TICKET, id: 'ticket-escalated', escalatedByUser: true },
+  },
+}
+
 /**
  * Pending CLIENT approval — collapsed grey "Pending client approval" row with a
  * loader glyph. Expand it to reach the shared approve/reject affordance.

package/src/stories/TicketEscalatedMessage.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import type React from "react";
+
+import { TicketEscalatedMessage } from "../components/chat/ticket-escalated-message";
+
+/**
+ * `ticket_escalated` message segment — the handoff receipt (Figma:
+ * `ai-assistant-info`, type=escalation).
+ *
+ * A first-class block on the wire, NOT something the client infers from an
+ * escalation offer's state, so it also covers the inactivity auto-escalation —
+ * a path that raises no offer at all.
+ *
+ * The body is whatever the backend authored, so the reason it gives stays
+ * server-side: the card never branches on `data.reason`, which is why a reason
+ * added server-side needs no client change. The body WRAPS rather than
+ * truncating as the mock does — see the component for why — so the block is
+ * 72px only while the text fits two lines.
+ */
+
+const baseData = {
+	ticketId: "68a1f0c2b3d4e5f6a7b8c9d0",
+	ticketNumber: 1002,
+	reason: "INACTIVITY",
+	text: "Automatically escalated to a human technician because the conversation had no new messages for an extended period.",
+};
+
+/** 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/TicketEscalatedMessage",
+	component: TicketEscalatedMessage,
+	tags: ["autodocs"],
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Renders a `TICKET_ESCALATED` block: a bordered info tile, the fixed 'Handed Off to a Technician' title, the message timestamp, and the backend's explanation.",
+			},
+		},
+	},
+	decorators: [plainDecorator],
+} satisfies Meta<typeof TicketEscalatedMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The inactivity auto-escalation — the only reason the wire defines today. */
+export const Inactivity: Story = {
+	args: { data: baseData, timestamp: TIMESTAMP },
+};
+
+/**
+ * `text` is nullable on the wire; the card falls back to the design's generic
+ * line rather than rendering an empty body.
+ */
+export const NoBodyFallback: Story = {
+	args: { data: { ...baseData, text: undefined }, timestamp: TIMESTAMP },
+};
+
+/** No timestamp — the row collapses to title-only, body unchanged. */
+export const WithoutTimestamp: Story = {
+	args: { data: baseData },
+};
+
+/** Long explanation — wraps and the block grows; nothing is clipped. */
+export const LongBody: Story = {
+	args: {
+		data: {
+			...baseData,
+			text: "Automatically escalated to a human technician because the conversation had no new messages for an extended period while the ticket was still assigned to the AI assistant, and no diagnostic step produced a resolution.",
+		},
+		timestamp: TIMESTAMP,
+	},
+};
+
+/**
+ * A reason the client has never seen. The open `TicketEscalationReason` union
+ * plus rendering from `text` mean a reason added server-side needs no client
+ * change — this story is the regression guard for that.
+ */
+export const UnknownReason: Story = {
+	args: {
+		data: {
+			...baseData,
+			reason: "USER_REQUESTED",
+			text: "Escalated at the user's request.",
+		},
+		timestamp: TIMESTAMP,
+	},
+};