@flamingo-stack/openframe-frontend-core 0.0.420 → 0.0.421-snapshot.20260713170448

package/src/components/chat/hooks/use-realtime-chunk-processor.ts

@@ -80,6 +80,12 @@ export function useRealtimeChunkProcessor(
   // by the host flag (optimistic) or by an in-order DIRECT_MESSAGE chunk.
   const directModeFlagRef = useRef(isDirectMode)
   const sawDirectMessageRef = useRef(false)
+  // One-shot teardown guard for the barrier. Busy state can be asserted
+  // OUTSIDE an open stream (onAgentBusy on tool/approval chunks), so the
+  // teardown must fire once even when isInStreamRef is false — otherwise a
+  // human takeover right after an approval leaves the consumer's composer
+  // locked forever (all releasing AI chunks get dropped by the barrier).
+  const directTeardownFiredRef = useRef(false)
   useEffect(() => {
     directModeFlagRef.current = isDirectMode
   }, [isDirectMode])
@@ -110,10 +116,14 @@ export function useRealtimeChunkProcessor(
       if (action.action === 'direct_message') sawDirectMessageRef.current = true
 
       if ((directModeFlagRef.current || sawDirectMessageRef.current) && !DIRECT_MODE_ALLOWED.has(action.action)) {
-        // Hard stop: tear down an open AI stream exactly once so the typing
-        // indicator and half-rendered bubble clear, then drop the chunk.
-        if (isInStreamRef.current) {
+        // Hard stop: tear down AI activity exactly once so the typing
+        // indicator, composer lock, and half-rendered bubble clear, then drop
+        // the chunk. Fires even when no stream is open — an onAgentBusy lock
+        // (approved commands executing post-MESSAGE_END) has no other release
+        // once the barrier starts dropping the continuation chunks.
+        if (isInStreamRef.current || !directTeardownFiredRef.current) {
           isInStreamRef.current = false
+          directTeardownFiredRef.current = true
           callbacks.onStreamEnd?.()
           accumulator.resetSegments()
         }
@@ -164,6 +174,12 @@ export function useRealtimeChunkProcessor(
         }
 
         case 'tool_execution': {
+          // A starting tool run means the agent's turn is in progress even
+          // when this lands after MESSAGE_END (approved commands execute
+          // between the approval bubble and the continuation stream).
+          if (action.segment.data.type === 'EXECUTING_TOOL') {
+            callbacks.onAgentBusy?.()
+          }
           // Post-MESSAGE_END tool chunks (cancellations / async batch
           // results for a batch in a prior bubble) flow only through the
           // cross-message updater. Skipping the accumulator avoids
@@ -254,6 +270,11 @@ export function useRealtimeChunkProcessor(
 
         case 'approval_result': {
           const { requestId, approved, approvalType, resolvedByName } = action
+          // Approved → the agent resumes to execute the command(s); surface
+          // busy immediately so the composer locks before EXECUTING_TOOL
+          // lands. Rejection keeps the input free — the user may want to
+          // type a correction right away.
+          if (approved) callbacks.onAgentBusy?.()
           const escalatedData = pendingEscalatedRef.current.get(requestId)
           const status: ChatApprovalStatus = approved ? 'approved' : 'rejected'
 
@@ -397,6 +418,7 @@ export function useRealtimeChunkProcessor(
     pendingEscalatedRef.current.clear()
     hasInitializedWithData.current = false
     sawDirectMessageRef.current = false
+    directTeardownFiredRef.current = false
   }, [])
 
   const updateApprovalStatus = useCallback(

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

@@ -199,6 +199,16 @@ export interface RealtimeChunkCallbacks {
    * outlived its message scope. Idempotent.
    */
   onToolExecuted?: (segment: ToolExecutionSegment) => void
+  /**
+   * Called when a chunk implies the agent is actively working OUTSIDE an open
+   * MESSAGE_START/MESSAGE_END window: an `EXECUTING_TOOL` chunk, or an
+   * `APPROVAL_RESULT` that approved execution. Approved commands run between
+   * the approval bubble's MESSAGE_END and the continuation stream, so without
+   * this signal a phase keyed on stream boundaries reads as idle while tools
+   * execute. The busy window is closed by the continuation's MESSAGE_END, an
+   * ERROR chunk, or a user stop.
+   */
+  onAgentBusy?: () => void
   /** Called when a DIALOG_CLOSED chunk is received */
   onDialogClosed?: () => void
 }

package/src/components/tabs.tsx

@@ -5,8 +5,16 @@ import * as TabsPrimitive from "@radix-ui/react-tabs"
 
 import { cn } from "../utils/cn"
 
+/**
+ * @deprecated Use `TabNavigation` from `components/ui/tab-navigation` — the
+ * single canonical tab component (ODS tokens, URL-sync, overflow scroll
+ * shadows). This Radix-based `Tabs` set styles itself with legacy shadcn tokens
+ * (`bg-muted`, `text-foreground`, `ring-ring`) that don't exist in ODS and is
+ * kept only for un-migrated call sites. Do not use in new code.
+ */
 const Tabs = TabsPrimitive.Root
 
+/** @deprecated Use `TabNavigation` from `components/ui/tab-navigation`. See {@link Tabs}. */
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
@@ -22,6 +30,7 @@ const TabsList = React.forwardRef<
 ))
 TabsList.displayName = TabsPrimitive.List.displayName
 
+/** @deprecated Use `TabNavigation` from `components/ui/tab-navigation`. See {@link Tabs}. */
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
@@ -37,6 +46,7 @@ const TabsTrigger = React.forwardRef<
 ))
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
 
+/** @deprecated Use `TabNavigation` from `components/ui/tab-navigation`. See {@link Tabs}. */
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>

package/src/components/ui/dashboard-info-card.tsx

@@ -17,11 +17,12 @@ import { Tag } from './tag'
 export type DashboardInfoCardPercentageDisplay = 'auto' | 'plain' | 'tag'
 
 /**
- * Size of the progress ring in px. A single number applies at all breakpoints.
- * The responsive form sets `base` (mobile) plus optional `md` / `lg` overrides
- * that take effect from the Tailwind `md` (768px) / `lg` (1024px) breakpoints
- * up — e.g. `{ base: 24, md: 56 }` is 24px on mobile and 56px on tablet and
- * desktop, while `{ base: 24, lg: 56 }` keeps the smaller ring through tablet.
+ * Size of the progress ring in px. A single number sets the ring size from the
+ * Tailwind `md` (800px) breakpoint up — on mobile the ring always shrinks to
+ * the 24px Figma spec. The responsive form sets `base` (mobile) explicitly,
+ * plus optional `md` / `lg` (1280px) overrides — e.g. `{ base: 24, lg: 56 }`
+ * keeps the small ring through tablet, and `{ base: 40 }` pins 40px at every
+ * breakpoint.
  */
 export type DashboardInfoCardProgressSize =
   | number
@@ -31,6 +32,19 @@ export interface DashboardInfoCardProps {
   title?: string
   /** Node rendered in place of the title text. Takes precedence over `title`. */
   titleSlot?: React.ReactNode
+  /**
+   * Tag rendered in the title row, after the title (Figma "status" variant) —
+   * e.g. `<Tag variant="outline" label="AI-Assistance" />` or a TicketStatusTag.
+   * Works with or without a `title`.
+   */
+  titleTag?: React.ReactNode
+  /**
+   * Icon or image shown in a bordered square slot on the left (Figma "icon"
+   * variant): 32px box / 16px content on mobile, 56px box / 24px content from
+   * `md` up. The passed node is stretched to fill the content area, so plain
+   * icon components and `<img>` both work.
+   */
+  icon?: React.ReactNode
   value: string | number
   percentage?: number
   showProgress?: boolean
@@ -47,11 +61,11 @@ export interface DashboardInfoCardProps {
    */
   progressOverflow?: CircularProgressOverflow
   /**
-   * Size of the circular progress ring. Defaults to `CircularProgress`'s own
-   * default (56px) at all breakpoints. Pass a number for a fixed size, or
-   * `{ base, md?, lg? }` for a responsive ring (e.g. `{ base: 24, md: 56 }` for
-   * the Figma spec — 24px on mobile, 56px on tablet and desktop). Stroke width
-   * scales proportionally with the size.
+   * Size of the circular progress ring. Defaults to the Figma spec
+   * `{ base: 24, md: 56 }` — 24px on mobile, 56px on tablet and desktop. A
+   * number changes only the tablet/desktop size (mobile stays 24px); use
+   * `{ base, md?, lg? }` for full control. Stroke width scales proportionally
+   * with the size.
    */
   progressSize?: DashboardInfoCardProgressSize
   className?: string
@@ -62,7 +76,7 @@ export interface DashboardInfoCardProps {
   href?: string
   /** Tooltip content shown on a question-mark icon next to the value */
   tooltip?: React.ReactNode
-  /** Override the value text className (default: text-h2) */
+  /** Override the value text className (default: `text-h3 md:text-h2` per Figma) */
   valueClassName?: string
   /** Secondary text rendered beside the value (e.g. an entry/item count). */
   subValue?: React.ReactNode
@@ -71,6 +85,8 @@ export interface DashboardInfoCardProps {
 export function DashboardInfoCard({
   title,
   titleSlot,
+  titleTag,
+  icon,
   value,
   percentage,
   showProgress = false,
@@ -125,34 +141,26 @@ export function DashboardInfoCard({
       showLabel: false,
     }
 
-    // Default: preserve the original 56px ring exactly.
-    if (progressSize === undefined) {
-      return <CircularProgress {...common} />
-    }
-
-    if (typeof progressSize === 'number') {
-      return <CircularProgress {...common} size={progressSize} strokeWidth={strokeFor(progressSize)} />
-    }
+    // Figma spec: the mobile ring is always 24px. The default is 56px from
+    // `md` (800px) up; a numeric `progressSize` overrides only that md+ size.
+    const size = typeof progressSize === 'number'
+      ? { base: 24, md: progressSize }
+      : progressSize ?? { base: 24, md: 56 }
 
-    // Responsive: `base` (mobile) plus optional `md` / `lg` overrides. Each ring
-    // is toggled with Tailwind display utilities so only one shows per breakpoint.
-    // NOTE: the class names must stay static string literals — Tailwind's JIT
-    // scanner can't see dynamically-built names (e.g. `${bp}:hidden`).
-    const { base, md, lg } = progressSize
+    // Responsive: one ring per provided breakpoint, toggled with Tailwind
+    // display utilities so only one shows at a time. The class names must stay
+    // static string literals — Tailwind's JIT scanner can't see
+    // dynamically-built names (e.g. `${bp}:hidden`).
+    const { base, md, lg } = size
 
-    const rings: Array<{ key: string; size: number; className: string }> = []
-    if (md !== undefined && lg !== undefined) {
-      rings.push({ key: 'base', size: base, className: 'md:hidden' })
-      rings.push({ key: 'md', size: md, className: 'hidden md:block lg:hidden' })
-      rings.push({ key: 'lg', size: lg, className: 'hidden lg:block' })
-    } else if (md !== undefined) {
-      rings.push({ key: 'base', size: base, className: 'md:hidden' })
-      rings.push({ key: 'md', size: md, className: 'hidden md:block' })
-    } else if (lg !== undefined) {
-      rings.push({ key: 'base', size: base, className: 'lg:hidden' })
+    const rings: Array<{ key: string; size: number; className: string }> = [
+      { key: 'base', size: base, className: md !== undefined ? 'md:hidden' : lg !== undefined ? 'lg:hidden' : '' },
+    ]
+    if (md !== undefined) {
+      rings.push({ key: 'md', size: md, className: lg !== undefined ? 'hidden md:block lg:hidden' : 'hidden md:block' })
+    }
+    if (lg !== undefined) {
       rings.push({ key: 'lg', size: lg, className: 'hidden lg:block' })
-    } else {
-      rings.push({ key: 'base', size: base, className: '' })
     }
 
     return (
@@ -172,18 +180,31 @@ export function DashboardInfoCard({
 
   const cardContent = (
     <>
+      {/* Icon slot (Figma "icon" variant): 32px box / 16px content on mobile,
+          56px box / 24px content from `md` up. */}
+      {icon && (
+        <div className="shrink-0 size-8 md:size-14 p-[var(--spacing-system-xxs)] bg-ods-bg border border-ods-border rounded-sm flex items-center justify-center text-ods-text-primary">
+          <span className="size-4 md:size-6 flex items-center justify-center [&>*]:size-full">
+            {icon}
+          </span>
+        </div>
+      )}
+
       {/* Content section */}
-      <div className="flex-1 flex flex-col">
-        {/* Title */}
-        {titleSlot ?? (
-          <p className="text-h5 text-ods-text-secondary">
-            {title}
-          </p>
-        )}
+      <div className="flex-1 min-w-0 flex flex-col">
+        {/* Title row: caption and/or tag (Figma "status" variant) */}
+        <div className="flex items-center gap-[var(--spacing-system-xxs)]">
+          {titleSlot ?? (title !== undefined && (
+            <p className="text-h5 text-ods-text-secondary truncate">
+              {title}
+            </p>
+          ))}
+          {titleTag}
+        </div>
 
         {/* Value and percentage */}
         <div className="flex items-center gap-[var(--spacing-system-xs)]">
-          <p className={cn("text-h2 text-ods-text-primary", valueClassName)}>
+          <p className={cn("text-h3 md:text-h2 text-ods-text-primary truncate", valueClassName)}>
             {formattedValue}
           </p>
           {subValue && (
@@ -207,7 +228,11 @@ export function DashboardInfoCard({
     </>
   )
 
-  const baseClassName = 'bg-ods-card border border-ods-border rounded-sm p-[var(--spacing-system-m)] flex gap-[var(--spacing-system-s)] items-center transition-all'
+  // Figma spec: mobile 8px padding / 8px gap / exactly 64px tall; tablet+ 16px
+  // padding / 16px gap / exactly 104px tall; 6px radius. Fixed height (not
+  // min-h) — with a 32px titleTag the natural content height slightly exceeds
+  // the spec, and Figma's frame is fixed; items-center absorbs the difference.
+  const baseClassName = 'bg-ods-card border border-ods-border rounded-md p-[var(--spacing-system-xsf)] md:p-[var(--spacing-system-m)] h-16 md:h-[104px] flex gap-[var(--spacing-system-s)] md:gap-[var(--spacing-system-m)] items-center transition-all'
 
   if (href) {
     return (

package/src/components/ui/tab-navigation.tsx

@@ -228,9 +228,12 @@ export function TabNavigation({
                   "flex gap-[var(--spacing-system-xxs)] items-center justify-center p-[var(--spacing-system-m)] relative shrink-0 cursor-pointer",
                   "transition-all duration-200 bg-transparent border-none outline-none",
                   stretchTabs && 'flex-1',
+                  // Known limitation: ODS color vars hold hex values, so Tailwind
+                  // alpha modifiers (to-ods-accent/10) silently produce no CSS.
+                  // color-mix() accepts hex, so we derive the 10%-alpha stop from the token.
                   isActive
-                    ? 'bg-gradient-to-b from-[rgba(255,255,255,0)] to-[rgba(255,255,255,0.1)]'
-                    : 'hover:bg-gradient-to-b hover:from-[rgba(255,255,255,0)] hover:to-[rgba(255,255,255,0.1)]'
+                    ? 'bg-gradient-to-b from-transparent to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]'
+                    : 'hover:bg-gradient-to-b hover:from-transparent hover:to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]'
                 )}
               >
                 {tab.icon ? (

package/src/components/ui/tabs.tsx

@@ -5,8 +5,17 @@ import * as TabsPrimitive from "@radix-ui/react-tabs"
 
 import { cn } from "../../utils/cn"
 
+/**
+ * @deprecated Use `TabNavigation` from `components/ui/tab-navigation` — the
+ * single canonical tab component (ODS tokens, URL-sync, overflow scroll
+ * shadows). This Radix-based `Tabs` set (a duplicate of `components/tabs.tsx`)
+ * styles itself with legacy shadcn tokens (`bg-muted`, `text-foreground`,
+ * `ring-ring`) that don't exist in ODS and is kept only for un-migrated call
+ * sites. Do not use in new code.
+ */
 const Tabs = TabsPrimitive.Root
 
+/** @deprecated Use `TabNavigation` from `components/ui/tab-navigation`. See {@link Tabs}. */
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
@@ -22,6 +31,7 @@ const TabsList = React.forwardRef<
 ))
 TabsList.displayName = TabsPrimitive.List.displayName
 
+/** @deprecated Use `TabNavigation` from `components/ui/tab-navigation`. See {@link Tabs}. */
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
@@ -37,6 +47,7 @@ const TabsTrigger = React.forwardRef<
 ))
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
 
+/** @deprecated Use `TabNavigation` from `components/ui/tab-navigation`. See {@link Tabs}. */
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>

package/src/stories/ApprovalRequestMessageClient.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import type React from "react";
+
+import { ApprovalRequestMessage } from "../components/chat/approval-request-message";
+import type { ApprovalRequestData } from "../components/chat/types";
+
+/**
+ * CLIENT (end-user Fae desktop app) variant of the single-command approval
+ * card — Figma node 203-11947 ("fae-approval-block").
+ *
+ * Same component and props as the Admin card, driven by `variant="client"`.
+ * The end client sees ONLY the BE-generated title (`explanation`) plus the
+ * Approve/Reject buttons, or the full-text resolved pill
+ * ("APPROVED BY JOHN SMITH"). The raw command is never rendered.
+ */
+
+const baseData: ApprovalRequestData = {
+	command: 'brew install --cask slack',
+	requestId: "req-client-1",
+	approvalType: "CLIENT",
+	// BE-generated human-readable title — the ONLY content the client sees.
+	explanation: "Install Slack via Homebrew Cask on macOS",
+};
+
+const plainDecorator =
+	(width?: number) => (Story: React.ComponentType) => (
+		<div style={{ maxWidth: width ?? 400, background: "var(--color-bg)" }}>
+			<Story />
+		</div>
+	);
+
+const meta = {
+	title: "Chat/Client/ApprovalRequestMessage",
+	component: ApprovalRequestMessage,
+	tags: ["autodocs"],
+	args: { variant: "client" },
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"CLIENT (Fae end-user) single-command approval card — title-only with Approve/Reject or a full-text status pill ('APPROVED BY {NAME}'). The raw command is never shown. Gated by variant='client' (Figma 203-11947).",
+			},
+		},
+	},
+	decorators: [plainDecorator()],
+} satisfies Meta<typeof ApprovalRequestMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Pending — BE title + Approve / Reject buttons. No command block. */
+export const Pending: Story = {
+	args: {
+		data: baseData,
+		status: "pending",
+		onApprove: () => {},
+		onReject: () => {},
+	},
+};
+
+/** Approved with resolver — green "APPROVED BY JOHN SMITH" pill. */
+export const ApprovedByUser: Story = {
+	args: { data: baseData, status: "approved", resolvedByName: "John Smith" },
+};
+
+/** Approved without a resolver name — plain "APPROVED" pill (system action). */
+export const Approved: Story = {
+	args: { data: baseData, status: "approved" },
+};
+
+/** Rejected with resolver — red "REJECTED BY JOHN SMITH" pill. */
+export const RejectedByUser: Story = {
+	args: { data: baseData, status: "rejected", resolvedByName: "John Smith" },
+};
+
+/** Cancelled — grey status pill. */
+export const Cancelled: Story = {
+	args: { data: baseData, status: "cancelled" },
+};
+
+/** Missing BE title — falls back to the "Approval required" placeholder. */
+export const NoTitleFallback: Story = {
+	args: {
+		data: { ...baseData, explanation: undefined },
+		status: "pending",
+		onApprove: () => {},
+		onReject: () => {},
+	},
+};

package/src/stories/ChatMessageEnhanced.stories.tsx

@@ -0,0 +1,219 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import type React from "react";
+
+import { ChatMessageEnhanced } from "../components/chat/chat-message-enhanced";
+import { ChatTypingIndicator } from "../components/chat/chat-typing-indicator";
+import type { MessageSegment } from "../components/chat/types";
+
+/**
+ * `<ChatMessageEnhanced>` — THE chat message renderer used by
+ * ChatMessageList / EmbeddableChat. Renders the avatar + name + timestamp
+ * header (Fae pink / Mingo cyan / user grey) and every message-segment type:
+ * text (markdown), thinking, tool_execution, approval_request/batch, error,
+ * context_compaction.
+ *
+ * The Fae conversation scenes reproduce the Fae desktop-app flow: greeting →
+ * user request → approval block → typing dots (Figma "fae-approval-block").
+ */
+
+// Fixed time-of-day so the header always reads "2:47 PM" — messages dated
+// today render time-only (see formatMessageTimestamp).
+const at247 = () => {
+	const d = new Date();
+	d.setHours(14, 47, 0, 0);
+	return d;
+};
+
+const panelDecorator = (Story: React.ComponentType) => (
+	<div
+		style={{ maxWidth: 640, background: "var(--color-bg)" }}
+		className="p-[var(--spacing-system-m)]"
+	>
+		<Story />
+	</div>
+);
+
+const meta = {
+	title: "Chat/ChatMessageEnhanced",
+	component: ChatMessageEnhanced,
+	tags: ["autodocs"],
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Single chat message row — avatar + colored author name + timestamp header, plus the full segment renderer (text/thinking/tool/approval/error/compaction). Used by ChatMessageList in both the admin (Mingo) and client (Fae) chats.",
+			},
+		},
+	},
+	decorators: [panelDecorator],
+} satisfies Meta<typeof ChatMessageEnhanced>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Assistant (Fae) text message — pink mono name + timestamp. */
+export const AssistantFae: Story = {
+	args: {
+		role: "assistant",
+		name: "Fae",
+		content: "Good morning! How can I help you today?",
+		timestamp: at247(),
+	},
+};
+
+/** Assistant (Mingo) text message — cyan mono name. */
+export const AssistantMingo: Story = {
+	args: {
+		role: "assistant",
+		name: "Mingo",
+		assistantType: "mingo",
+		content: "I've pulled the device list for Acme Corp — 3 endpoints are offline.",
+		timestamp: at247(),
+	},
+};
+
+/** User message — grey mono name, no avatar block until user avatars ship. */
+export const UserMessage: Story = {
+	args: {
+		role: "user",
+		name: "John Smith",
+		content: "hey can u install slack on my mac",
+		timestamp: at247(),
+	},
+};
+
+/**
+ * Fae flow, step 1 — greeting, user request, and the assistant "typing"
+ * row (empty message + `<ChatTypingIndicator>`, as the Fae desktop host
+ * renders it while the reply streams in).
+ */
+export const FaeConversationTyping: Story = {
+	args: { role: "assistant", content: "" },
+	render: () => (
+		<div className="flex flex-col">
+			<ChatMessageEnhanced
+				role="assistant"
+				name="Fae"
+				content="Good morning! How can I help you today?"
+				timestamp={at247()}
+			/>
+			<ChatMessageEnhanced
+				role="user"
+				name="John Smith"
+				content="hey can u install slack on my mac"
+				timestamp={at247()}
+			/>
+			<ChatMessageEnhanced role="assistant" name="Fae" content="" isTyping timestamp={at247()} />
+			<ChatTypingIndicator size="sm" />
+		</div>
+	),
+};
+
+const approvedSegments: MessageSegment[] = [
+	{ type: "text", text: "On it! Just need your quick approval here." },
+	{
+		type: "approval_request",
+		data: {
+			command: "brew install --cask slack",
+			requestId: "req-1",
+			approvalType: "CLIENT",
+			explanation: "Install Slack via Homebrew Cask on macOS",
+		},
+		status: "approved",
+		resolvedByName: "John Smith",
+	},
+];
+
+/**
+ * Fae flow, step 2 — the reply carries an `approval_request` segment
+ * rendered as the CLIENT card with the resolved "APPROVED BY JOHN SMITH"
+ * pill (`approvalVariant="client"`), then Fae keeps typing.
+ */
+export const FaeConversationApproved: Story = {
+	args: { role: "assistant", content: "" },
+	render: () => (
+		<div className="flex flex-col">
+			<ChatMessageEnhanced
+				role="assistant"
+				name="Fae"
+				content="Good morning! How can I help you today?"
+				timestamp={at247()}
+			/>
+			<ChatMessageEnhanced
+				role="user"
+				name="John Smith"
+				content="hey can u install slack on my mac"
+				timestamp={at247()}
+			/>
+			<ChatMessageEnhanced
+				role="assistant"
+				name="Fae"
+				content={approvedSegments}
+				approvalVariant="client"
+				timestamp={at247()}
+			/>
+			<ChatMessageEnhanced role="assistant" name="Fae" content="" isTyping timestamp={at247()} />
+			<ChatTypingIndicator size="sm" />
+		</div>
+	),
+};
+
+/** Pending approval inside a message — Approve/Reject buttons (client card). */
+export const PendingApprovalSegment: Story = {
+	args: {
+		role: "assistant",
+		name: "Fae",
+		approvalVariant: "client",
+		timestamp: at247(),
+		content: [
+			{ type: "text", text: "On it! Just need your quick approval here." },
+			{
+				type: "approval_request",
+				data: {
+					command: "brew install --cask slack",
+					requestId: "req-2",
+					approvalType: "CLIENT",
+					explanation: "Install Slack via Homebrew Cask on macOS",
+				},
+				status: "pending",
+				onApprove: () => {},
+				onReject: () => {},
+			},
+		] satisfies MessageSegment[],
+	},
+};
+
+/** Every remaining segment type in one message — thinking, tool execution, context compaction, error. */
+export const AllSegmentTypes: Story = {
+	args: {
+		role: "assistant",
+		name: "Fae",
+		timestamp: at247(),
+		content: [
+			{
+				type: "thinking",
+				text: "The user wants Slack installed. Homebrew is present on the endpoint, so `brew install --cask slack` is the cleanest path.",
+			},
+			{ type: "text", text: "Installing Slack now." },
+			{
+				type: "tool_execution",
+				data: {
+					type: "EXECUTED_TOOL",
+					integratedToolType: "OPENFRAME_RMM",
+					toolFunction: "run_script",
+					toolTitle: "Install Slack via Homebrew Cask",
+					parameters: { command: "brew install --cask slack" },
+					result: "🍺  slack was successfully installed!",
+					success: true,
+				},
+			},
+			{ type: "context_compaction", status: "completed" },
+			{
+				type: "error",
+				title: "Notification delivery failed",
+				details: "Slack webhook returned 429 — the completion ping was skipped. The install itself succeeded.",
+			},
+			{ type: "text", text: "Done — Slack is installed and ready to use." },
+		] satisfies MessageSegment[],
+	},
+};