@flamingo-stack/openframe-frontend-core 0.0.351 → 0.0.352-snapshot.20260701170615

package/dist/utils/platform-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"platform-config.d.ts","sourceRoot":"","sources":["../../src/utils/platform-config.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,eAAO,MAAM,aAAa;;;;;;;;;;;;CAYzB,CAAC;AAGF,eAAO,MAAM,cAAc;;;;;;;;;;;;CAY1B,CAAC;AAGF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;CAYhC,CAAC;AAGF,eAAO,MAAM,oBAAoB;;;;;;;CAOhC,CAAC;AAGF,eAAO,MAAM,eAAe;;;;;;;CAO3B,CAAC;AAGF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;CAY7B,CAAC;AAGF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;CAY7B,CAAC;AAEF;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAEvE;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAEtE;AAED,wBAAgB,iCAAiC,CAAC,eAAe,EAAE,cAAc,EAAE,GAAG,gBAAgB,EAAE,CASvG;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,YAAY,EAAE,MAAM,qBAEnD;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,MAAM,UAEpD;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAEnE;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAEnE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAE9D;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CA2B1E;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,YAAY,EAAE,MAAM,EAAE,SAAS,GAAE,MAAkB,GAAG,KAAK,CAAC,SAAS,CAyB7G"}
+{"version":3,"file":"platform-config.d.ts","sourceRoot":"","sources":["../../src/utils/platform-config.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,eAAO,MAAM,aAAa;;;;;;;;;;;;CAYzB,CAAC;AAGF,eAAO,MAAM,cAAc;;;;;;;;;;;;CAY1B,CAAC;AAGF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;CAYhC,CAAC;AAGF,eAAO,MAAM,oBAAoB;;;;;;;CAOhC,CAAC;AAGF,eAAO,MAAM,eAAe;;;;;;;CAO3B,CAAC;AAGF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;CAY7B,CAAC;AAGF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;CAY7B,CAAC;AAEF;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAEvE;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAEtE;AAED,wBAAgB,iCAAiC,CAAC,eAAe,EAAE,cAAc,EAAE,GAAG,gBAAgB,EAAE,CASvG;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,YAAY,EAAE,MAAM,qBAEnD;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,MAAM,UAEpD;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAEnE;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAEnE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAE9D;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CA2B1E;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,YAAY,EAAE,MAAM,EAAE,SAAS,GAAE,MAAkB,GAAG,KAAK,CAAC,SAAS,CA4B7G"}

package/package.json

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

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

@@ -11,6 +11,7 @@ import { ExpandChevron } from "./expand-chevron"
 import { useCollapsible } from "./hooks/use-collapsible"
 import { ArgRow, ResultBlock } from "./tool-call-blocks"
 import type {
+  AssistantType,
   ApprovalBatchExecutionState,
   ApprovalBatchSegment,
   PendingToolCallData,
@@ -39,19 +40,35 @@ export interface ApprovalBatchMessageProps extends React.HTMLAttributes<HTMLDivE
    * otherwise show the dots spinner forever after approval. Defaults to on.
    */
   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).
+   */
+  assistantType?: AssistantType
 }
 
 const COMMAND_BODY_KEYS = new Set<string>(COMMAND_BODY_ARG_KEYS)
 
-/** Terminal-status badge for a resolved approval batch (approved / rejected / cancelled). */
-function renderStatusTag(status: ApprovalBatchSegment["status"]) {
+/**
+ * Terminal-status badge for a resolved approval batch (approved / rejected /
+ * cancelled). For CLIENT (Fae) the resolver's name is baked into the tag as a
+ * single full-text pill ("Approved by {name}"); ADMIN keeps the compact word
+ * and renders "by {name}" as a separate muted span in the footer.
+ */
+function renderStatusTag(
+  status: ApprovalBatchSegment["status"],
+  isClient: boolean,
+  resolvedByName?: string | null,
+) {
+  const suffix = isClient && resolvedByName ? ` by ${resolvedByName}` : ""
   if (status === "approved") {
-    return <Tag label="Approved" variant="success" icon={<CheckCircleIcon className="w-4 h-4" />} />
+    return <Tag label={`Approved${suffix}`} variant="success" icon={<CheckCircleIcon className="w-4 h-4" />} />
   }
   if (status === "cancelled") {
-    return <Tag label="Cancelled" variant="grey" icon={<XmarkIcon className="w-4 h-4" />} />
+    return <Tag label={`Canceled${suffix}`} variant="grey" icon={<XmarkIcon className="w-4 h-4" />} />
   }
-  return <Tag label="Rejected" variant="error" icon={<XmarkCircleIcon className="w-4 h-4" />} />
+  return <Tag label={`Rejected${suffix}`} variant="error" icon={<XmarkCircleIcon className="w-4 h-4" />} />
 }
 
 function getArgEntries(call: PendingToolCallData): Array<[string, unknown]> {
@@ -88,9 +105,10 @@ interface ToolCallRowProps {
   batchStatus: ApprovalBatchSegment["status"]
   execution: ApprovalBatchExecutionState | undefined
   showExecutionStatus: boolean
+  isClient: boolean
 }
 
-function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExecutionStatus }: ToolCallRowProps) {
+function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExecutionStatus, isClient }: ToolCallRowProps) {
   const command = getCommandText(call)
   const args = getArgEntries(call)
   const toolType = (call.toolType as ToolType) || ("OPENFRAME" as ToolType)
@@ -99,18 +117,30 @@ function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExe
   const hasExpandableBody = args.length > 0 || (typeof result === "string" && result.length > 0)
 
   return (
-    <div className="bg-ods-card border-b border-ods-border last:border-b-0 flex flex-col items-start w-full">
+    <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",
+      )}
+    >
       <button
         type="button"
         onClick={onToggle}
-        className="flex gap-2 items-start w-full p-3 cursor-pointer text-left"
+        className="flex gap-[var(--spacing-system-xsf)] items-start w-full p-[var(--spacing-system-sf)] cursor-pointer text-left"
       >
-        <div className="flex items-center justify-center shrink-0 w-5 h-5">
-          <ToolIcon toolType={toolType} size={16} />
-        </div>
+        {!isClient && (
+          <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 font-medium text-sm 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",
@@ -131,11 +161,16 @@ function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExe
       <div className="w-full" style={containerStyle}>
         <div ref={innerRef}>
           {hasExpandableBody && (
-            <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 px-[var(--spacing-system-sf)] pb-[var(--spacing-system-sf)] bg-ods-card">
               {args.map(([key, value]) => (
                 <ArgRow key={key} argKey={key} value={value} />
               ))}
-              {result && <ResultBlock result={result} />}
+              {result && (
+                <ResultBlock
+                  result={result}
+                  className={args.length > 0 ? "mt-[var(--spacing-system-xsf)]" : undefined}
+                />
+              )}
             </div>
           )}
         </div>
@@ -145,9 +180,10 @@ function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExe
 }
 
 const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProps>(
-  ({ className, data, onApprove, onReject, status = "pending", maxBodyHeight, resolvedByName, showExecutionStatus = true, ...props }, ref) => {
+  ({ className, data, onApprove, onReject, status = "pending", maxBodyHeight, resolvedByName, showExecutionStatus = true, assistantType, ...props }, ref) => {
     const [expandedId, setExpandedId] = useState<string | null>(null)
     const [isProcessing, setIsProcessing] = useState(false)
+    const isClient = assistantType === "fae"
 
     const explanations = data.toolCalls
       .map((c) => c.toolExplanation?.trim())
@@ -177,13 +213,22 @@ const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProp
       <div
         ref={ref}
         className={cn(
-          "bg-ods-card border border-ods-border rounded-md overflow-hidden flex flex-col mb-2",
+          "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",
           className,
         )}
         {...props}
       >
         <div
-          className={cn("flex flex-col", maxBodyHeight != null && "overflow-y-auto overscroll-contain")}
+          className={cn(
+            "flex flex-col",
+            isClient && "gap-[var(--spacing-system-mf)]",
+            maxBodyHeight != null && "overflow-y-auto overscroll-contain",
+          )}
           style={maxBodyHeight != null ? { maxHeight: maxBodyHeight } : undefined}
         >
           {data.toolCalls.map((call) => (
@@ -199,14 +244,22 @@ const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProp
               batchStatus={status}
               execution={data.executions?.[call.toolExecutionRequestId]}
               showExecutionStatus={showExecutionStatus}
+              isClient={isClient}
             />
           ))}
         </div>
 
         {showFooterBlock && (
-          <div className="bg-ods-card flex flex-col gap-2 items-start justify-center p-3">
+          <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)]",
+            )}
+          >
             {explanations.length > 0 && (
-              <ul className="list-disc pl-5 text-sm font-medium text-ods-text-primary leading-5 w-full">
+              <ul className="list-disc pl-5 text-h6 text-ods-text-primary w-full">
                 {explanations.map((expl, i) => (
                   <li key={i}>{expl}</li>
                 ))}
@@ -214,7 +267,7 @@ const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProp
             )}
 
             {status === "pending" ? (
-              <div className="flex gap-2 items-center">
+              <div className="flex gap-[var(--spacing-system-xsf)] items-center">
                 <Button
                   size="small-legacy"
                   variant="accent"
@@ -222,8 +275,8 @@ const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProp
                   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
@@ -235,17 +288,19 @@ const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProp
                   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
                 </Button>
               </div>
             ) : (
-              <div className="flex items-center gap-2">
-                {renderStatusTag(status)}
-                {resolvedByName && <span className="text-h6 text-ods-text-secondary">by {resolvedByName}</span>}
+              <div className="flex items-center gap-[var(--spacing-system-xsf)]">
+                {renderStatusTag(status, isClient, resolvedByName)}
+                {!isClient && resolvedByName && (
+                  <span className="text-h6 text-ods-text-secondary">by {resolvedByName}</span>
+                )}
               </div>
             )}
           </div>

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 ==========