@flamingo-stack/openframe-frontend-core 0.0.390 → 0.0.391-snapshot.20260709132828

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.390",
+  "version": "0.0.391-snapshot.20260709132828",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

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

@@ -9,8 +9,9 @@ import { ToolIcon } from "../tool-icon"
 import { CheckCircleIcon, DotsLoaderIcon, XmarkCircleIcon, XmarkIcon } from "../icons-v2-generated"
 import { ExpandChevron } from "./expand-chevron"
 import { useCollapsible } from "./hooks/use-collapsible"
-import { ArgRow, CommandBlock, ResultBlock } from "./tool-call-blocks"
+import { ArgRow, ResultBlock } from "./tool-call-blocks"
 import type {
+  ApprovalBlockVariant,
   AssistantType,
   ApprovalBatchExecutionState,
   ApprovalBatchSegment,
@@ -18,7 +19,6 @@ import type {
 } from "./types"
 import {
   COMMAND_BODY_ARG_KEYS,
-  getCommandBody,
   getCommandText,
 } from "./utils/tool-call-helpers"
 
@@ -42,11 +42,20 @@ export interface ApprovalBatchMessageProps extends React.HTMLAttributes<HTMLDivE
    */
   showExecutionStatus?: boolean
   /**
-   * Chat identity, which drives the styling variant. `'fae'` = client
-   * (frameless outer, bordered command box, no tool icon, no divider,
-   * full-text status pill); `'mingo'`/undefined = admin (original layout).
+   * Chat identity. Kept for prop parity with the message renderers; does NOT
+   * drive the styling anymore — use `variant` instead. An admin can be
+   * looking at a Fae dialog (tickets dialog client tab) and must still see
+   * the full admin block.
    */
   assistantType?: AssistantType
+  /**
+   * Viewer variant. `'admin'` (default) = full block with command preview,
+   * expandable args/result and tool icon. `'client'` = end-client (Fae
+   * desktop app) card that shows ONLY the BE-generated title(s) plus the
+   * Approve/Reject buttons or the full-text resolved pill ("Approved by
+   * {name}") — commands and scripts are never rendered.
+   */
+  variant?: ApprovalBlockVariant
   /**
    * Render the footer Approve/Reject buttons (or the resolved-status tag).
    * Turn off when the host owns the actions row — e.g. the approval
@@ -119,45 +128,29 @@ interface ToolCallRowProps {
   batchStatus: ApprovalBatchSegment["status"]
   execution: ApprovalBatchExecutionState | undefined
   showExecutionStatus: boolean
-  isClient: boolean
 }
 
-function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExecutionStatus, isClient }: ToolCallRowProps) {
+// ADMIN-only row: command preview header, expandable args/result. The client
+// variant never renders tool calls — see the `variant === 'client'` branch of
+// `<ApprovalBatchMessage>`.
+function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExecutionStatus }: ToolCallRowProps) {
   const command = getCommandText(call)
   const args = getArgEntries(call)
   const toolType = (call.toolType as ToolType) || ("OPENFRAME" as ToolType)
   const { innerRef, containerStyle } = useCollapsible({ expanded })
   const result = execution?.status === "done" ? execution.result : undefined
-  // CLIENT (Fae): the collapsed line shows the human-readable `toolExplanation`
-  // and the raw command moves into the expanded body (Figma 1972-6100). Falls
-  // back to the command when no explanation is present. ADMIN is unchanged.
-  const explanation = call.toolExplanation?.trim()
-  const headerText = isClient && explanation ? explanation : command
-  const commandBody = isClient ? getCommandBody(call.toolCallArguments) : undefined
-  const hasExpandableBody = !!commandBody || args.length > 0 || (typeof result === "string" && result.length > 0)
+  const hasExpandableBody = args.length > 0 || (typeof result === "string" && result.length > 0)
 
   return (
-    <div
-      className={cn(
-        "bg-ods-card flex flex-col items-start w-full",
-        // ADMIN: rows share one outer card, separated by a bottom border.
-        // CLIENT (Fae): each command is its own self-contained bordered box
-        // (Figma 1092-2804 / 1972-7925) — the outer component is frameless.
-        isClient
-          ? "border border-ods-border rounded-[6px] overflow-hidden"
-          : "border-b border-ods-border last:border-b-0",
-      )}
-    >
+    <div className="bg-ods-card flex flex-col items-start w-full border-b border-ods-border last:border-b-0">
       <button
         type="button"
         onClick={onToggle}
         className="flex gap-[var(--spacing-system-xsf)] items-start w-full p-[var(--spacing-system-sf)] cursor-pointer text-left"
       >
-        {!isClient && (
-          <div className="flex items-center justify-center shrink-0 w-5 h-5">
-            <ToolIcon toolType={toolType} size={16} />
-          </div>
-        )}
+        <div className="flex items-center justify-center shrink-0 w-5 h-5">
+          <ToolIcon toolType={toolType} size={16} />
+        </div>
         <div
           className={cn(
             "flex-1 min-w-0 text-h6",
@@ -166,7 +159,7 @@ function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExe
               : "text-ods-text-secondary line-clamp-2 max-h-10 break-all",
           )}
         >
-          {headerText}
+          {command}
         </div>
         {showExecutionStatus && (
           <div className="flex items-center justify-center shrink-0 w-5 h-5">
@@ -182,12 +175,6 @@ function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExe
         <div ref={innerRef}>
           {hasExpandableBody && (
             <div className="flex flex-col gap-0 items-start w-full text-h6 px-[var(--spacing-system-sf)] pb-[var(--spacing-system-sf)] bg-ods-card">
-              {commandBody && (
-                <CommandBlock
-                  command={commandBody}
-                  className={args.length > 0 || result ? "mb-[var(--spacing-system-xsf)]" : undefined}
-                />
-              )}
               {args.map(([key, value]) => (
                 <ArgRow key={key} argKey={key} value={value} />
               ))}
@@ -206,17 +193,14 @@ function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExe
 }
 
 const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProps>(
-  ({ className, data, onApprove, onReject, status = "pending", maxBodyHeight, resolvedByName, showExecutionStatus = true, assistantType, showFooterActions = true, ...props }, ref) => {
+  ({ className, data, onApprove, onReject, status = "pending", maxBodyHeight, resolvedByName, showExecutionStatus = true, assistantType: _assistantType, variant = "admin", showFooterActions = true, ...props }, ref) => {
     const [expandedId, setExpandedId] = useState<string | null>(null)
     const [isProcessing, setIsProcessing] = useState(false)
-    const isClient = assistantType === "fae"
+    const isClient = variant === "client"
 
-    // CLIENT (Fae) promotes each tool's `toolExplanation` to the command row's
-    // header, so the footer must NOT repeat it as bullets. ADMIN keeps the
-    // explanation bullets in the footer.
-    const explanations = isClient
-      ? []
-      : data.toolCalls.map((c) => c.toolExplanation?.trim()).filter((s): s is string => !!s)
+    const explanations = data.toolCalls
+      .map((c) => c.toolExplanation?.trim())
+      .filter((s): s is string => !!s)
 
     const handleApprove = async () => {
       setIsProcessing(true)
@@ -236,6 +220,76 @@ const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProp
       }
     }
 
+    const actionButtons = (
+      <>
+        <Button
+          size="small-legacy"
+          variant="accent"
+          onClick={handleApprove}
+          disabled={isProcessing}
+          className={cn(
+            "bg-ods-accent hover:bg-ods-accent/90",
+            "text-h5 text-ods-bg",
+            "px-[var(--spacing-system-xsf)] h-8",
+          )}
+        >
+          Approve
+        </Button>
+        <Button
+          size="small-legacy"
+          variant="outline"
+          onClick={handleReject}
+          disabled={isProcessing}
+          className={cn(
+            "bg-ods-card border-ods-border",
+            "text-h5 text-ods-text-primary",
+            "hover:bg-ods-bg px-[var(--spacing-system-xsf)] h-8",
+          )}
+        >
+          Reject
+        </Button>
+      </>
+    )
+
+    // CLIENT (Fae end-user) card — Figma 203-11947 "fae-approval-block".
+    // One bordered card: BE-generated title(s) + Approve/Reject buttons or the
+    // full-text resolved pill ("Approved by {name}"). No commands, scripts,
+    // expansion or execution icons — the end client must not see them.
+    if (isClient) {
+      const titles = data.toolCalls
+        .map((c) => c.toolExplanation?.trim() || c.toolTitle?.trim())
+        .filter((s): s is string => !!s)
+      return (
+        <div
+          ref={ref}
+          className={cn(
+            "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}
+        >
+          {titles.length > 0 ? (
+            titles.map((title, i) => (
+              <p key={i} className="text-h4 text-ods-text-primary whitespace-pre-line break-words w-full">
+                {title}
+              </p>
+            ))
+          ) : (
+            <p className="text-h4 text-ods-text-primary w-full">Approval required</p>
+          )}
+          {showFooterActions && (status === "pending" ? (
+            <div className="flex gap-[var(--spacing-system-mf)] items-center w-full">
+              {actionButtons}
+            </div>
+          ) : (
+            <div className="flex w-full">
+              <ApprovalStatusTag status={status} resolvedByName={resolvedByName} inlineResolver />
+            </div>
+          ))}
+        </div>
+      )
+    }
+
     const showFooterBlock = explanations.length > 0 || showFooterActions
 
     return (
@@ -243,11 +297,7 @@ const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProp
         ref={ref}
         className={cn(
           "flex flex-col mb-[var(--spacing-system-xsf)]",
-          // ADMIN: one framed card. CLIENT (Fae): frameless container — the
-          // bordered command box(es) + button/status row stacked 16px apart.
-          isClient
-            ? "gap-[var(--spacing-system-mf)]"
-            : "bg-ods-card border border-ods-border rounded-md overflow-hidden",
+          "bg-ods-card border border-ods-border rounded-md overflow-hidden",
           className,
         )}
         {...props}
@@ -255,7 +305,6 @@ const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProp
         <div
           className={cn(
             "flex flex-col",
-            isClient && "gap-[var(--spacing-system-mf)]",
             maxBodyHeight != null && "overflow-y-auto overscroll-contain",
           )}
           style={maxBodyHeight != null ? { maxHeight: maxBodyHeight } : undefined}
@@ -273,20 +322,12 @@ const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProp
               batchStatus={status}
               execution={data.executions?.[call.toolExecutionRequestId]}
               showExecutionStatus={showExecutionStatus}
-              isClient={isClient}
             />
           ))}
         </div>
 
         {showFooterBlock && (
-          <div
-            className={cn(
-              "flex flex-col gap-[var(--spacing-system-xsf)] items-start justify-center",
-              // ADMIN: padded footer inside the card, divided from the list.
-              // CLIENT (Fae): buttons/status sit flush outside the box.
-              !isClient && "bg-ods-card border-t border-ods-border p-[var(--spacing-system-sf)]",
-            )}
-          >
+          <div className="flex flex-col gap-[var(--spacing-system-xsf)] items-start justify-center bg-ods-card border-t border-ods-border p-[var(--spacing-system-sf)]">
             {explanations.length > 0 && (
               <ul className="list-disc pl-5 text-h6 text-ods-text-primary w-full">
                 {explanations.map((expl, i) => (
@@ -297,37 +338,12 @@ const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProp
 
             {showFooterActions && (status === "pending" ? (
               <div className="flex gap-[var(--spacing-system-xsf)] items-center">
-                <Button
-                  size="small-legacy"
-                  variant="accent"
-                  onClick={handleApprove}
-                  disabled={isProcessing}
-                  className={cn(
-                    "bg-ods-accent hover:bg-ods-accent/90",
-                    "text-h5 text-ods-bg",
-                    "px-[var(--spacing-system-xsf)] h-8",
-                  )}
-                >
-                  Approve
-                </Button>
-                <Button
-                  size="small-legacy"
-                  variant="outline"
-                  onClick={handleReject}
-                  disabled={isProcessing}
-                  className={cn(
-                    "bg-ods-card border-ods-border",
-                    "text-h5 text-ods-text-primary",
-                    "hover:bg-ods-bg px-[var(--spacing-system-xsf)] h-8",
-                  )}
-                >
-                  Reject
-                </Button>
+                {actionButtons}
               </div>
             ) : (
               <div className="flex items-center gap-[var(--spacing-system-xsf)]">
-                <ApprovalStatusTag status={status} resolvedByName={resolvedByName} inlineResolver={isClient} />
-                {!isClient && resolvedByName && (
+                <ApprovalStatusTag status={status} resolvedByName={resolvedByName} />
+                {resolvedByName && (
                   <span className="text-h6 text-ods-text-secondary">by {resolvedByName}</span>
                 )}
               </div>

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

@@ -5,6 +5,7 @@ import { cn } from "../../utils/cn"
 import { Button } from "../ui/button"
 import { Tag } from "../ui/tag"
 import { Ban, CheckCircle, XCircle } from "lucide-react"
+import { ApprovalStatusTag } from "./approval-batch-message"
 import type { ApprovalRequestMessageProps } from "./types"
 import type { ApprovalRequestField } from "./types/message.types"
 
@@ -78,9 +79,8 @@ function ApprovalCardBody({
 
 const ApprovalRequestMessage = forwardRef<HTMLDivElement, ApprovalRequestMessageProps>(
   // `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) => {
+  // can forward it uniformly); the viewer variant is driven by `variant`.
+  ({ className, data, onApprove, onReject, status = 'pending', assistantType: _assistantType, variant = 'admin', resolvedByName, ...props }, ref) => {
     const [isProcessing, setIsProcessing] = useState(false)
 
     const handleApprove = async () => {
@@ -101,6 +101,60 @@ const ApprovalRequestMessage = forwardRef<HTMLDivElement, ApprovalRequestMessage
       }
     }
 
+    // CLIENT (Fae end-user) card — Figma 203-11947 "fae-approval-block".
+    // Shows ONLY the BE-generated title (`explanation`) plus the actions row
+    // or the full-text resolved pill; the raw command is never rendered.
+    if (variant === 'client') {
+      return (
+        <div
+          ref={ref}
+          className={cn(
+            "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}
+        >
+          <p className="text-h4 text-ods-text-primary whitespace-pre-line break-words w-full">
+            {data.explanation?.trim() || "Approval required"}
+          </p>
+          {status === 'pending' ? (
+            <div className="flex gap-[var(--spacing-system-mf)] items-center w-full">
+              <Button
+                size="small-legacy"
+                variant="accent"
+                onClick={handleApprove}
+                disabled={isProcessing}
+                className={cn(
+                  "bg-ods-accent hover:bg-ods-accent/90",
+                  "text-h5 text-ods-bg",
+                  "px-[var(--spacing-system-xsf)] h-8"
+                )}
+              >
+                Approve
+              </Button>
+              <Button
+                size="small-legacy"
+                variant="outline"
+                onClick={handleReject}
+                disabled={isProcessing}
+                className={cn(
+                  "bg-ods-card border-ods-border",
+                  "text-h5 text-ods-text-primary",
+                  "hover:bg-ods-bg px-[var(--spacing-system-xsf)] h-8"
+                )}
+              >
+                Reject
+              </Button>
+            </div>
+          ) : (
+            <div className="flex w-full">
+              <ApprovalStatusTag status={status} resolvedByName={resolvedByName} inlineResolver />
+            </div>
+          )}
+        </div>
+      )
+    }
+
     return (
       <div
         ref={ref}

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

@@ -2,6 +2,7 @@
 
 import React, { forwardRef, memo, useMemo, useRef } from "react"
 import { cn } from "../../utils/cn"
+import { isToday } from "../../utils/date-utils"
 import { SquareAvatar } from "../ui/square-avatar"
 import { ToolExecutionDisplay } from "./tool-execution-display"
 import { ApprovalRequestMessage } from "./approval-request-message"
@@ -35,6 +36,15 @@ const MENTION_MARKER_REGEX = /(^|[^\w@])@[a-z]+:([A-Za-z0-9_.+/=-]*[A-Za-z0-9_+/
  */
 const CARD_MARKER_REGEX = /\[card:\/\/([a-zA-Z0-9_-]+):([a-zA-Z0-9_-]+)[\])]/g
 
+/** Timestamp label: today's messages show time only ("2:47 PM"),
+ *  older messages prepend the date ("05/05/2026 2:47 PM"). */
+function formatMessageTimestamp(timestamp: Date): string {
+  const time = timestamp.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
+  if (isToday(timestamp)) return time
+  const date = timestamp.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' })
+  return `${date} ${time}`
+}
+
 function normalizeContent(content: MessageContent): MessageSegment[] {
   if (typeof content === 'string') {
     return content ? [{ type: 'text', text: content }] : []
@@ -43,7 +53,7 @@ function normalizeContent(content: MessageContent): MessageSegment[] {
 }
 
 const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>(
-  ({ className, role, content, name, avatar, isTyping = false, timestamp, showAvatar = true, assistantType, authorType: authorTypeProp, assistantIcon, chatRefs, contextItems, resolveContextIcon, renderContextItem, renderMention, renderEntityCard, NavLinkAnchor, ...props }, ref) => {
+  ({ className, role, content, name, avatar, isTyping = false, timestamp, showAvatar = true, assistantType, approvalVariant, authorType: authorTypeProp, assistantIcon, chatRefs, contextItems, resolveContextIcon, renderContextItem, renderMention, renderEntityCard, NavLinkAnchor, ...props }, ref) => {
     const isUser = role === 'user'
     const isError = role === 'error'
     const authorType = authorTypeProp ?? (isUser ? 'user' : assistantType === 'mingo' ? 'mingo' : 'fae')
@@ -469,7 +479,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
             </span>
             {timestamp && (
               <span className="font-sans text-heading-5 font-medium text-ods-text-secondary shrink-0 whitespace-nowrap">
-                {timestamp.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}
+                {formatMessageTimestamp(timestamp)}
               </span>
             )}
           </div>
@@ -546,9 +556,11 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
                       key={index}
                       data={segment.data}
                       status={segment.status}
+                      resolvedByName={segment.resolvedByName}
                       onApprove={segment.onApprove}
                       onReject={segment.onReject}
                       assistantType={assistantType}
+                      variant={approvalVariant}
                     />
                   )
                 } else if (segment.type === 'approval_batch') {
@@ -561,6 +573,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
                       onApprove={segment.onApprove}
                       onReject={segment.onReject}
                       assistantType={assistantType}
+                      variant={approvalVariant}
                     />
                   )
                 } else if (segment.type === 'error') {
@@ -620,6 +633,7 @@ const MemoizedChatMessageEnhanced = memo(ChatMessageEnhanced, (prevProps, nextPr
     prevProps.timestamp?.getTime() === nextProps.timestamp?.getTime() &&
     prevProps.showAvatar === nextProps.showAvatar &&
     prevProps.assistantType === nextProps.assistantType &&
+    prevProps.approvalVariant === nextProps.approvalVariant &&
     prevProps.authorType === nextProps.authorType &&
     prevProps.assistantIcon === nextProps.assistantIcon &&
     prevProps.className === nextProps.className &&

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

@@ -100,6 +100,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
       fullWidth = false,
       contentClassName,
       assistantType,
+      approvalVariant,
       assistantIcon,
       pendingApprovals,
       hasNextPage,
@@ -535,6 +536,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
                   avatar={showAvatars ? message.avatar : null}
                   showAvatar={showAvatars}
                   assistantType={message.assistantType || assistantType}
+                  approvalVariant={approvalVariant}
                   authorType={message.authorType}
                   assistantIcon={message.role !== 'user' ? assistantIcon : undefined}
                   chatRefs={message.chatRefs}
@@ -590,6 +592,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
               timestamp={new Date()}
               showAvatar={showAvatars}
               assistantType={assistantType}
+              approvalVariant={approvalVariant}
               assistantIcon={assistantIcon}
               NavLinkAnchor={NavLinkAnchor}
               className="py-3"

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

@@ -64,6 +64,23 @@ export const APPROVAL_STATUS = {
 
 export type ChatApprovalStatus = typeof APPROVAL_STATUS[keyof typeof APPROVAL_STATUS]
 
+// ========== Approval Block Variant Definitions ==========
+
+/**
+ * Who is LOOKING at an approval block — not which assistant produced it.
+ * `admin` (default) shows the full block: command/script preview, expandable
+ * args/result, tool icon. `client` (end-user Fae desktop app) shows only the
+ * BE-generated title plus Approve/Reject or the resolved-status pill — raw
+ * commands and scripts must never reach the end client. Admin surfaces that
+ * render a Fae dialog (tickets dialog client tab) keep the admin variant.
+ */
+export const APPROVAL_BLOCK_VARIANT = {
+  ADMIN: 'admin',
+  CLIENT: 'client',
+} as const
+
+export type ApprovalBlockVariant = typeof APPROVAL_BLOCK_VARIANT[keyof typeof APPROVAL_BLOCK_VARIANT]
+
 // ========== Connection Status Definitions ==========
 
 export const CONNECTION_STATUS = {

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

@@ -3,7 +3,7 @@
  */
 
 import type { ComponentType, HTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react'
-import type { AssistantType, AuthorType, ChatApprovalStatus, ConnectionStatus } from './chat.types'
+import type { ApprovalBlockVariant, AssistantType, AuthorType, ChatApprovalStatus, ConnectionStatus } from './chat.types'
 import type { ApprovalRequestData, Message, MessageSegment, ToolExecutionData } from './message.types'
 import type { ChatRef } from '../chat-ref.types'
 import type { ChatContextItem } from './context-item.types'
@@ -119,6 +119,11 @@ export interface ChatMessageEnhancedProps extends Omit<HTMLAttributes<HTMLDivEle
   name?: string
   assistantType?: AssistantType
   authorType?: AuthorType
+  /** Viewer variant for approval blocks in this message's segments.
+   *  `'admin'` (default) = full command block; `'client'` = end-client
+   *  (Fae desktop app) title-only card. Forwarded to
+   *  ApprovalRequestMessage / ApprovalBatchMessage. */
+  approvalVariant?: ApprovalBlockVariant
   assistantIcon?: React.ReactNode
   avatar?: string | null
   timestamp?: Date
@@ -229,6 +234,12 @@ export interface ChatMessageListProps extends HTMLAttributes<HTMLDivElement> {
    *  override (custom max-w value, etc.). */
   contentClassName?: string
   assistantType?: AssistantType
+  /** Viewer variant for approval blocks in every rendered message (incl. the
+   *  sticky pending-approvals footer). `'admin'` (default) = full command
+   *  block; `'client'` = end-client (Fae desktop app) title-only card. Set to
+   *  `'client'` ONLY on true end-client surfaces — admin views of a Fae
+   *  dialog (tickets dialog client tab) keep the default. */
+  approvalVariant?: ApprovalBlockVariant
   assistantIcon?: React.ReactNode
   pendingApprovals?: MessageSegment[]
   onApprove?: (requestId?: string) => void | Promise<void>
@@ -488,9 +499,16 @@ 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. */
+  /** Chat identity. Accepted for parity with the batch card; does NOT drive
+   *  the styling — use `variant`. */
   assistantType?: AssistantType
+  /** Viewer variant. `'admin'` (default) = full card with the raw command;
+   *  `'client'` = end-client (Fae desktop app) card with only the
+   *  BE-generated title (`explanation`) + actions/status pill. */
+  variant?: ApprovalBlockVariant
+  /** Display name of the user who resolved the request; baked into the
+   *  client variant's full-text status pill ("Approved by {name}"). */
+  resolvedByName?: string | null
 }
 
 // ========== Error Message Display Props ==========

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

@@ -171,6 +171,9 @@ export type ApprovalRequestSegment = {
   type: 'approval_request'
   data: ApprovalRequestData & { approvalType?: string }
   status?: ChatApprovalStatus
+  /** Display name of the user who resolved the request; baked into the client
+   *  variant's full-text status pill ("Approved by {name}"). */
+  resolvedByName?: string | null
   onApprove?: (requestId?: string) => void | Promise<void>
   onReject?: (requestId?: string) => void | Promise<void>
 }

package/src/components/features/auth/auth-shell.tsx

@@ -12,8 +12,6 @@ export interface AuthShellProps {
   children: React.ReactNode
   /** Marketing panel. Defaults to <AuthBenefitsPanel />. */
   benefits?: React.ReactNode
-  /** Tagline shown under the logo on mobile only. */
-  mobileTagline?: React.ReactNode
   /** Pinned to the bottom-left of the form column on desktop only (e.g. "Back to Login"). */
   footer?: React.ReactNode
   className?: string
@@ -24,7 +22,7 @@ export interface AuthShellProps {
  * (form left, marketing right); tablet and mobile stack into a single centered
  * column (logo → tabs → form → benefits → powered-by). Content is top-aligned.
  */
-export function AuthShell({ tabs, children, benefits, mobileTagline, footer, className }: AuthShellProps) {
+export function AuthShell({ tabs, children, benefits, footer, className }: AuthShellProps) {
   const benefitsNode = benefits ?? <AuthBenefitsPanel />
 
   return (
@@ -37,16 +35,9 @@ export function AuthShell({ tabs, children, benefits, mobileTagline, footer, cla
             footer && 'lg:min-h-full',
           )}
         >
-          {/* Logo + tagline — narrow screens only (desktop shows the logo in the right column) */}
+          {/* Logo — narrow screens only (desktop shows the logo in the right column) */}
           <div className="flex w-full flex-col items-center gap-[var(--spacing-system-l)] lg:hidden">
             <OpenFrameWordmark />
-            {/* Tagline is mobile-only; tablet & desktop hide it. Each line stays on one
-                line and truncates with an ellipsis if it overflows (per the mockup). */}
-            {mobileTagline && (
-              <div className="w-full text-center text-h4 text-ods-text-primary [&>p]:truncate md:hidden">
-                {mobileTagline}
-              </div>
-            )}
           </div>
 
           {/* Full width on mobile; fixed 320px from tablet up (matches desktop) */}