@flamingo-stack/openframe-frontend-core 0.0.351 → 0.0.352

package/src/components/chat/approval-request-message.tsx

@@ -4,7 +4,7 @@ import { forwardRef, useState } from "react"
 import { cn } from "../../utils/cn"
 import { Button } from "../ui/button"
 import { Tag } from "../ui/tag"
-import { CheckCircle, XCircle } from "lucide-react"
+import { Ban, CheckCircle, XCircle } from "lucide-react"
 import type { ApprovalRequestMessageProps } from "./types"
 import type { ApprovalRequestField } from "./types/message.types"
 
@@ -18,13 +18,16 @@ import type { ApprovalRequestField } from "./types/message.types"
  */
 function ApprovalFieldList({ fields }: { fields: ApprovalRequestField[] }) {
   return (
-    <dl className="flex flex-col gap-2.5 mt-1">
+    <dl className="flex flex-col gap-2.5 mt-[var(--spacing-system-xxs)]">
       {fields.map((f, i) => (
         <div key={i} className="flex flex-col gap-0.5">
+          {/* NOTE: 11px DM Sans small-caps label has no ODS composite token
+              (h5 is Azeret Mono, h6 is 14px) — flagged for a future caption
+              token; kept as-is rather than forcing a mismatched h-class. */}
           <dt className="font-['DM_Sans'] font-semibold text-[11px] uppercase tracking-wide text-ods-text-tertiary leading-4">
             {f.label}
           </dt>
-          <dd className="font-['DM_Sans'] text-sm text-ods-text-primary leading-5 whitespace-pre-wrap break-words">
+          <dd className="text-h6 text-ods-text-primary whitespace-pre-wrap break-words">
             {f.value}
           </dd>
         </div>
@@ -49,9 +52,9 @@ function ApprovalCardBody({
   data: ApprovalRequestMessageProps['data']
 }) {
   return (
-    <div className="flex flex-col gap-1">
-      <div className="bg-ods-bg border border-ods-border rounded-md p-3 flex gap-2 items-start max-h-32 overflow-y-auto">
-        <code className="font-['DM_Sans'] font-medium text-sm text-ods-text-primary flex-1 leading-5 whitespace-pre-wrap break-words">
+    <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
+      <div className="bg-ods-bg border border-ods-border rounded-md p-[var(--spacing-system-sf)] flex gap-[var(--spacing-system-xsf)] items-start max-h-32 overflow-y-auto">
+        <code className="text-h6 text-ods-text-primary flex-1 whitespace-pre-wrap break-words">
           {data.command}
         </code>
         {data.icon && (
@@ -64,7 +67,7 @@ function ApprovalCardBody({
         <ApprovalFieldList fields={data.fields} />
       ) : (
         data.explanation && (
-          <p className="font-['DM_Sans'] font-medium text-sm text-ods-text-secondary leading-5 whitespace-pre-line break-words">
+          <p className="text-h6 text-ods-text-secondary whitespace-pre-line break-words">
             {data.explanation}
           </p>
         )
@@ -74,7 +77,10 @@ function ApprovalCardBody({
 }
 
 const ApprovalRequestMessage = forwardRef<HTMLDivElement, ApprovalRequestMessageProps>(
-  ({ className, data, onApprove, onReject, status = 'pending', ...props }, ref) => {
+  // `assistantType` is accepted for prop-parity with the batch card (so hosts
+  // can forward it uniformly); the legacy single-command card has no
+  // icon/divider to vary, so it renders identically for admin and client today.
+  ({ className, data, onApprove, onReject, status = 'pending', assistantType: _assistantType, ...props }, ref) => {
     const [isProcessing, setIsProcessing] = useState(false)
 
     const handleApprove = async () => {
@@ -99,14 +105,14 @@ const ApprovalRequestMessage = forwardRef<HTMLDivElement, ApprovalRequestMessage
       <div
         ref={ref}
         className={cn(
-          "bg-ods-card border border-ods-border rounded-md p-4 mb-2 flex flex-col gap-4",
+          "bg-ods-card border border-ods-border rounded-md p-[var(--spacing-system-mf)] mb-[var(--spacing-system-xsf)] flex flex-col gap-[var(--spacing-system-mf)]",
           className
         )}
         {...props}
       >
         <ApprovalCardBody data={data} />
         {status === 'pending' ? (
-          <div className="flex gap-4 items-center">
+          <div className="flex gap-[var(--spacing-system-mf)] items-center">
             <Button
               size="small-legacy"
               variant="accent"
@@ -114,8 +120,8 @@ const ApprovalRequestMessage = forwardRef<HTMLDivElement, ApprovalRequestMessage
               disabled={isProcessing}
               className={cn(
                 "bg-ods-accent hover:bg-ods-accent/90",
-                "font-mono font-medium md:!text-sm text-ods-bg uppercase tracking-[-0.28px]",
-                "px-2 py-1 h-auto"
+                "text-h5 text-ods-bg",
+                "px-[var(--spacing-system-xsf)] h-8"
               )}
             >
               Approve
@@ -127,8 +133,8 @@ const ApprovalRequestMessage = forwardRef<HTMLDivElement, ApprovalRequestMessage
               disabled={isProcessing}
               className={cn(
                 "bg-ods-card border-ods-border",
-                "font-mono font-medium md:!text-sm text-ods-text-primary uppercase tracking-[-0.28px]",
-                "hover:bg-ods-bg px-2 py-1 h-auto"
+                "text-h5 text-ods-text-primary",
+                "hover:bg-ods-bg px-[var(--spacing-system-xsf)] h-8"
               )}
             >
               Reject
@@ -136,11 +142,13 @@ const ApprovalRequestMessage = forwardRef<HTMLDivElement, ApprovalRequestMessage
           </div>
         ) : (
           <div className="flex">
-            <Tag
-              label={status === 'approved' ? 'Approved' : 'Rejected'}
-              variant={status === 'approved' ? 'success' : 'error'}
-              icon={status === 'approved' ? <CheckCircle className="w-4 h-4" /> : <XCircle className="w-4 h-4" />}
-            />
+            {status === 'approved' ? (
+              <Tag label="Approved" variant="success" icon={<CheckCircle className="w-4 h-4" />} />
+            ) : status === 'cancelled' ? (
+              <Tag label="Canceled" variant="grey" icon={<Ban className="w-4 h-4" />} />
+            ) : (
+              <Tag label="Rejected" variant="error" icon={<XCircle className="w-4 h-4" />} />
+            )}
           </div>
         )}
       </div>

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

@@ -537,6 +537,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
                     <ToolExecutionDisplay
                       key={index}
                       message={segment.data}
+                      assistantType={assistantType}
                     />
                   )
                 } else if (segment.type === 'approval_request') {
@@ -547,6 +548,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
                       status={segment.status}
                       onApprove={segment.onApprove}
                       onReject={segment.onReject}
+                      assistantType={assistantType}
                     />
                   )
                 } else if (segment.type === 'approval_batch') {
@@ -558,6 +560,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
                       resolvedByName={segment.resolvedByName}
                       onApprove={segment.onApprove}
                       onReject={segment.onReject}
+                      assistantType={assistantType}
                     />
                   )
                 } else if (segment.type === 'error') {

package/src/components/chat/tool-call-blocks.tsx

@@ -3,6 +3,17 @@
 import { cn } from "../../utils/cn"
 import { formatToolArgValue, formatToolResult } from "./utils/tool-call-helpers"
 
+/**
+ * Monospace code body shared by ArgRow / ResultBlock.
+ *
+ * NOTE: ODS exposes no mono/code typography token (only the composite
+ * `text-h1`–`text-h6` DM Sans / Azeret-Mono headings), so the 12px code size
+ * stays as `text-xs` here. Flagged for a future `text-code` token rather than
+ * forcing an h-class that would change the intended density.
+ */
+const CODE_PRE_CLASS =
+  "bg-ods-bg border border-ods-border rounded-md p-[var(--spacing-system-sf)] w-full max-h-64 overflow-auto text-xs leading-5 text-ods-text-primary font-mono whitespace-pre"
+
 /**
  * Single arg row: inline `key: value` or labeled `<pre>` block.
  * Shared between ApprovalBatchMessage and ToolExecutionDisplay so both
@@ -13,7 +24,7 @@ export function ArgRow({ argKey, value }: { argKey: string; value: unknown }) {
 
   if (formatted.kind === "inline") {
     return (
-      <div className="flex gap-1 items-start w-full">
+      <div className="flex gap-[var(--spacing-system-xxs)] items-start w-full">
         <span className="shrink-0 text-ods-text-secondary">{argKey}:</span>
         <span className="flex-1 min-w-0 text-ods-text-primary break-all">{formatted.text}</span>
       </div>
@@ -21,9 +32,9 @@ export function ArgRow({ argKey, value }: { argKey: string; value: unknown }) {
   }
 
   return (
-    <div className="flex flex-col gap-1 items-start w-full">
+    <div className="flex flex-col gap-[var(--spacing-system-xxs)] items-start w-full">
       <span className="text-ods-text-secondary">{argKey}:</span>
-      <pre className="bg-ods-bg border border-ods-border rounded-md p-3 w-full max-h-64 overflow-auto text-xs leading-5 text-ods-text-primary font-mono whitespace-pre">
+      <pre className={CODE_PRE_CLASS}>
         <code>{formatted.text}</code>
       </pre>
     </div>
@@ -40,7 +51,7 @@ export function ResultBlock({ result, className }: { result: string | undefined
 
   if (formatted.kind === "inline") {
     return (
-      <div className={cn("flex flex-col gap-1 items-start w-full", className)}>
+      <div className={cn("flex flex-col gap-[var(--spacing-system-xxs)] items-start w-full", className)}>
         <span className="text-ods-text-secondary">Result:</span>
         <span className="text-ods-text-primary break-all">{formatted.text}</span>
       </div>
@@ -48,9 +59,9 @@ export function ResultBlock({ result, className }: { result: string | undefined
   }
 
   return (
-    <div className={cn("flex flex-col gap-1 items-start w-full", className)}>
+    <div className={cn("flex flex-col gap-[var(--spacing-system-xxs)] items-start w-full", className)}>
       <span className="text-ods-text-secondary">Result:</span>
-      <pre className="bg-ods-bg border border-ods-border rounded-md p-3 w-full max-h-64 overflow-auto text-xs leading-5 text-ods-text-primary font-mono whitespace-pre">
+      <pre className={CODE_PRE_CLASS}>
         <code>{formatted.text}</code>
       </pre>
     </div>

package/src/components/chat/tool-execution-display.tsx

@@ -15,9 +15,10 @@ import type { ToolExecutionDisplayProps } from "./types"
 const COMMAND_BODY_KEYS = new Set<string>(COMMAND_BODY_ARG_KEYS)
 
 const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProps>(
-  ({ className, message, ...props }, ref) => {
+  ({ className, message, assistantType, ...props }, ref) => {
     const [expanded, setExpanded] = useState(false)
     const { innerRef, containerStyle } = useCollapsible({ expanded })
+    const isClient = assistantType === "fae"
 
     const isExecuting = message.type === "EXECUTING_TOOL"
     const isExecuted = message.type === "EXECUTED_TOOL"
@@ -54,6 +55,8 @@ const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProp
       <div
         ref={ref}
         className={cn(
+          // The command running block keeps its bordered box in both chats
+          // (Figma 1972-6109). CLIENT (Fae) only drops the tool icon below.
           "bg-ods-card border border-ods-border rounded-[6px] overflow-hidden w-full flex flex-col",
           className,
         )}
@@ -64,12 +67,14 @@ const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProp
           className="flex gap-[var(--spacing-system-xs)] items-start p-[var(--spacing-system-s)] cursor-pointer text-left w-full"
           onClick={() => setExpanded((prev) => !prev)}
         >
-          <div className="flex items-center justify-center shrink-0 w-5 h-5">
-            <ToolIcon toolType={integratedToolType} size={16} />
-          </div>
+          {!isClient && (
+            <div className="flex items-center justify-center shrink-0 w-5 h-5">
+              <ToolIcon toolType={integratedToolType} size={16} />
+            </div>
+          )}
           <div
             className={cn(
-              "flex-1 min-w-0 text-sm font-medium leading-5",
+              "flex-1 min-w-0 text-h6",
               expanded
                 ? "text-ods-text-primary whitespace-pre-wrap break-all"
                 : "text-ods-text-secondary line-clamp-2 max-h-10 break-all",
@@ -86,13 +91,23 @@ const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProp
         <div className="w-full" style={containerStyle}>
           <div ref={innerRef}>
             {hasBody && (
-              <div className="flex flex-col gap-2 items-start w-full text-sm font-medium leading-5 p-3 bg-ods-card">
+              <div className="flex flex-col gap-0 items-start w-full text-h6 p-[var(--spacing-system-sf)] bg-ods-card">
                 {argEntries.map(([key, value]) => (
                   <ArgRow key={key} argKey={key} value={value} />
                 ))}
-                {hasResult && <ResultBlock result={message.result} />}
+                {hasResult && (
+                  <ResultBlock
+                    result={message.result}
+                    className={argEntries.length > 0 ? "mt-[var(--spacing-system-xsf)]" : undefined}
+                  />
+                )}
                 {isExecuting && (
-                  <div className="flex flex-col gap-1 items-start w-full">
+                  <div
+                    className={cn(
+                      "flex flex-col gap-[var(--spacing-system-xxs)] items-start w-full",
+                      argEntries.length > 0 && "mt-[var(--spacing-system-xsf)]",
+                    )}
+                  >
                     <span className="text-ods-text-secondary">Result:</span>
                     <DotsLoaderIcon size={16} className="text-ods-text-secondary" />
                   </div>

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

@@ -461,6 +461,9 @@ export interface ChatTypingIndicatorProps extends HTMLAttributes<HTMLDivElement>
 
 export interface ToolExecutionDisplayProps extends HTMLAttributes<HTMLDivElement> {
   message: ToolExecutionData
+  /** Chat identity. `'fae'` (client) hides the tool icon; `'mingo'`/undefined
+   *  keep the admin layout. */
+  assistantType?: AssistantType
 }
 
 // ========== Approval Request Message Props ==========
@@ -471,6 +474,9 @@ export interface ApprovalRequestMessageProps extends HTMLAttributes<HTMLDivEleme
   onReject?: (requestId?: string) => void | Promise<void>
   status?: ChatApprovalStatus
   disabled?: boolean
+  /** Chat identity; drives the CLIENT (Fae) styling. Accepted for parity with
+   *  the batch card. `'fae'` = client, `'mingo'`/undefined = admin. */
+  assistantType?: AssistantType
 }
 
 // ========== Error Message Display Props ==========

package/src/stories/ApprovalBatchMessage.stories.tsx

@@ -0,0 +1,169 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import type React from "react";
+
+import { ApprovalBatchMessage } from "../components/chat/approval-batch-message";
+import type {
+	ApprovalBatchData,
+	ApprovalBatchExecutionState,
+	PendingToolCallData,
+} from "../components/chat/types";
+
+/**
+ * The "Command Block" from Figma (open-design-system, node 1092-2807).
+ *
+ * A single command/tool call the AI wants to run, rendered as an approvable
+ * card: a command title line, an expandable body with the call arguments
+ * (RunAsUser, timeoutSeconds, …) and — once executed — a Result block. The
+ * footer flips between Approve/Reject buttons (pending) and a resolved status
+ * tag ("Approved / Rejected / Cancelled by {name}").
+ *
+ * Click a row to expand/collapse its body.
+ */
+
+const LONG_COMMAND = `Get-CimInstance Win32_Process |
+  Select-Object ProcessId, Name, Path, CommandLine |
+  Where-Object { $_.Path -like 'C:\\Users\\Public\\*' }`;
+
+const RESULT = `pid  | name           | path                          | cmdline
+4821 | suspicious.exe | C:\\Users\\Public\\suspicious.exe | suspicious.exe --hidden --connect 185.220.101.45`;
+
+const REQUEST_ID = "req-1";
+
+const toolCall: PendingToolCallData = {
+	toolExecutionRequestId: REQUEST_ID,
+	toolName: "run_script",
+	toolTitle: "Run Script",
+	toolExplanation:
+		"Runs a diagnostic script on the endpoint to inspect running processes.",
+	toolType: "TACTICAL_RMM",
+	requiresApproval: true,
+	approvalType: "ADMIN",
+	toolCallArguments: {
+		command: LONG_COMMAND,
+		RunAsUser: "False",
+		timeoutSeconds: 60,
+	},
+};
+
+const makeData = (
+	executions?: Record<string, ApprovalBatchExecutionState>,
+): ApprovalBatchData => ({
+	approvalRequestId: "batch-1",
+	approvalType: "ADMIN",
+	toolCalls: [toolCall],
+	executions,
+});
+
+const executingData = makeData({ [REQUEST_ID]: { status: "executing" } });
+const doneData = makeData({
+	[REQUEST_ID]: { status: "done", result: RESULT, success: true },
+});
+
+const constrainedDecorator =
+	(width?: number) => (Story: React.ComponentType) => (
+		<div style={{ maxWidth: width ?? 400, background: "var(--color-bg)" }}>
+			<Story />
+		</div>
+	);
+
+const meta = {
+	title: "Chat/Admin/ApprovalBatchMessage",
+	component: ApprovalBatchMessage,
+	tags: ["autodocs"],
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Command Block (Figma node 1092-2807). Approvable tool-call card with pending / approved / rejected / cancelled states, an expandable body of call arguments, and a Result block after execution.",
+			},
+		},
+	},
+	decorators: [constrainedDecorator()],
+} satisfies Meta<typeof ApprovalBatchMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Pending — Approve / Reject buttons shown. Click the row to expand args. */
+export const Pending: Story = {
+	args: {
+		data: makeData(),
+		status: "pending",
+		onApprove: () => {},
+		onReject: () => {},
+	},
+};
+
+/** Approved and still executing — grey loader on the row, no result yet. */
+export const ApprovedExecuting: Story = {
+	args: {
+		data: executingData,
+		status: "approved",
+		resolvedByName: "Michael Johnson",
+	},
+};
+
+/** Approved and finished — green check + expandable Result block. */
+export const ApprovedDone: Story = {
+	args: {
+		data: doneData,
+		status: "approved",
+		resolvedByName: "Michael Johnson",
+	},
+};
+
+/** Rejected by a user — red status tag, no execution. */
+export const Rejected: Story = {
+	args: {
+		data: makeData(),
+		status: "rejected",
+		resolvedByName: "Michael Johnson",
+	},
+};
+
+/** Cancelled — grey status tag, no execution. */
+export const Cancelled: Story = {
+	args: {
+		data: makeData(),
+		status: "cancelled",
+		resolvedByName: "Michael Johnson",
+	},
+};
+
+/**
+ * All states side by side — mirrors the Figma "Command Blocks" board so the
+ * full set can be reviewed at a glance.
+ */
+export const AllStates: Story = {
+	decorators: [constrainedDecorator(420)],
+	render: () => (
+		<div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+			<ApprovalBatchMessage
+				data={makeData()}
+				status="pending"
+				onApprove={() => {}}
+				onReject={() => {}}
+			/>
+			<ApprovalBatchMessage
+				data={executingData}
+				status="approved"
+				resolvedByName="Michael Johnson"
+			/>
+			<ApprovalBatchMessage
+				data={doneData}
+				status="approved"
+				resolvedByName="Michael Johnson"
+			/>
+			<ApprovalBatchMessage
+				data={makeData()}
+				status="rejected"
+				resolvedByName="Michael Johnson"
+			/>
+			<ApprovalBatchMessage
+				data={makeData()}
+				status="cancelled"
+				resolvedByName="Michael Johnson"
+			/>
+		</div>
+	),
+};

package/src/stories/ApprovalBatchMessageClient.stories.tsx

@@ -0,0 +1,172 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import type React from "react";
+
+import { ApprovalBatchMessage } from "../components/chat/approval-batch-message";
+import type {
+	ApprovalBatchData,
+	ApprovalBatchExecutionState,
+	PendingToolCallData,
+} from "../components/chat/types";
+
+/**
+ * CLIENT (Fae) variant of the Command Block — Figma node 1092-2807.
+ *
+ * Same component and props as the Admin card, driven by `assistantType="fae"`.
+ * Differences vs Admin: no tool icon next to the command, no footer divider,
+ * and a single full-text status pill ("Approved by Michael Johnson") instead
+ * of a compact tag + separate "by {name}".
+ */
+
+const LONG_COMMAND = `Get-CimInstance Win32_Process |
+  Select-Object ProcessId, Name, Path, CommandLine |
+  Where-Object { $_.Path -like 'C:\\Users\\Public\\*' }`;
+
+const RESULT = `pid  | name           | path                          | cmdline
+4821 | suspicious.exe | C:\\Users\\Public\\suspicious.exe | suspicious.exe --hidden --connect 185.220.101.45`;
+
+const REQUEST_ID = "req-1";
+
+const toolCall: PendingToolCallData = {
+	toolExecutionRequestId: REQUEST_ID,
+	toolName: "run_script",
+	toolTitle: "Run Script",
+	toolType: "TACTICAL_RMM",
+	requiresApproval: true,
+	approvalType: "CLIENT",
+	toolCallArguments: {
+		command: LONG_COMMAND,
+		RunAsUser: "False",
+		timeoutSeconds: 60,
+	},
+};
+
+const makeData = (
+	executions?: Record<string, ApprovalBatchExecutionState>,
+): ApprovalBatchData => ({
+	approvalRequestId: "batch-1",
+	approvalType: "CLIENT",
+	toolCalls: [toolCall],
+	executions,
+});
+
+const executingData = makeData({ [REQUEST_ID]: { status: "executing" } });
+const doneData = makeData({
+	[REQUEST_ID]: { status: "done", result: RESULT, success: true },
+});
+
+/**
+ * The assistant's message text that precedes the command block in the real
+ * chat (Figma "Command description text."). It is NOT part of the component —
+ * shown here only so the story matches the Figma frame.
+ */
+const CommandHeading = () => (
+	<p className="text-h4 text-ods-text-primary mb-[var(--spacing-system-xxs)]">
+		Command description text.
+	</p>
+);
+
+const constrainedDecorator =
+	(width?: number) => (Story: React.ComponentType) => (
+		<div style={{ maxWidth: width ?? 400, background: "var(--color-bg)" }}>
+			<CommandHeading />
+			<Story />
+		</div>
+	);
+
+const plainDecorator =
+	(width?: number) => (Story: React.ComponentType) => (
+		<div style={{ maxWidth: width ?? 400, background: "var(--color-bg)" }}>
+			<Story />
+		</div>
+	);
+
+const meta = {
+	title: "Chat/Client/ApprovalBatchMessage",
+	component: ApprovalBatchMessage,
+	tags: ["autodocs"],
+	args: { assistantType: "fae" },
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"CLIENT (Fae) Command Block — no tool icon, no divider, full-text status pill. Same component/props as Admin, gated by assistantType='fae' (Figma 1092-2807).",
+			},
+		},
+	},
+	decorators: [constrainedDecorator()],
+} satisfies Meta<typeof ApprovalBatchMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Pending — Approve / Reject buttons. Click the row to expand args. */
+export const Pending: Story = {
+	args: {
+		data: makeData(),
+		status: "pending",
+		onApprove: () => {},
+		onReject: () => {},
+	},
+};
+
+/** Approved and still executing — grey loader on the row, no result yet. */
+export const ApprovedExecuting: Story = {
+	args: {
+		data: executingData,
+		status: "approved",
+		resolvedByName: "Michael Johnson",
+	},
+};
+
+/** Approved and finished — green check + expandable Result block. */
+export const ApprovedDone: Story = {
+	args: {
+		data: doneData,
+		status: "approved",
+		resolvedByName: "Michael Johnson",
+	},
+};
+
+/** Rejected by a user — full-text red status pill. */
+export const Rejected: Story = {
+	args: {
+		data: makeData(),
+		status: "rejected",
+		resolvedByName: "Michael Johnson",
+	},
+};
+
+/** Cancelled — full-text grey status pill. */
+export const Cancelled: Story = {
+	args: {
+		data: makeData(),
+		status: "cancelled",
+		resolvedByName: "Michael Johnson",
+	},
+};
+
+/**
+ * All states side by side — mirrors the Figma CLIENT "Command Blocks" board.
+ */
+export const AllStates: Story = {
+	decorators: [plainDecorator(420)],
+	render: () => {
+		const states = [
+			{ data: makeData(), status: "pending" as const, onApprove: () => {}, onReject: () => {} },
+			{ data: executingData, status: "approved" as const, resolvedByName: "Michael Johnson" },
+			{ data: doneData, status: "approved" as const, resolvedByName: "Michael Johnson" },
+			{ data: makeData(), status: "rejected" as const, resolvedByName: "Michael Johnson" },
+			{ data: makeData(), status: "cancelled" as const, resolvedByName: "Michael Johnson" },
+		];
+		return (
+			<div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
+				{states.map((s, i) => (
+					<div key={i}>
+						<CommandHeading />
+						<ApprovalBatchMessage assistantType="fae" {...s} />
+					</div>
+				))}
+			</div>
+		);
+	},
+};