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

package/dist/{chunk-A6YFD2SK.js → chunk-OKGXLXDW.js}

@@ -25,7 +25,7 @@ import {
   useOgPlaceholderUrl,
   useOnboardingState,
   useToast
-} from "./chunk-FPAF4JHM.js";
+} from "./chunk-JGAAUUD7.js";
 import {
   AlertCircleIcon,
   AnthropicLogoGreyIcon,
@@ -515,27 +515,30 @@ function Tag({
 }
 
 // src/components/chat/approval-request-message.tsx
-import { CheckCircle, XCircle } from "lucide-react";
+import { Ban, CheckCircle, XCircle } from "lucide-react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ApprovalFieldList({ fields }) {
-  return /* @__PURE__ */ jsx2("dl", { className: "flex flex-col gap-2.5 mt-1", children: fields.map((f, i) => /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-0.5", children: [
+  return /* @__PURE__ */ jsx2("dl", { className: "flex flex-col gap-2.5 mt-[var(--spacing-system-xxs)]", children: fields.map((f, i) => /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-0.5", children: [
     /* @__PURE__ */ jsx2("dt", { className: "font-['DM_Sans'] font-semibold text-[11px] uppercase tracking-wide text-ods-text-tertiary leading-4", children: f.label }),
-    /* @__PURE__ */ jsx2("dd", { className: "font-['DM_Sans'] text-sm text-ods-text-primary leading-5 whitespace-pre-wrap break-words", children: f.value })
+    /* @__PURE__ */ jsx2("dd", { className: "text-h6 text-ods-text-primary whitespace-pre-wrap break-words", children: f.value })
   ] }, i)) });
 }
 function ApprovalCardBody({
   data
 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "bg-ods-bg border border-ods-border rounded-md p-3 flex gap-2 items-start max-h-32 overflow-y-auto", children: [
-      /* @__PURE__ */ jsx2("code", { className: "font-['DM_Sans'] font-medium text-sm text-ods-text-primary flex-1 leading-5 whitespace-pre-wrap break-words", children: data.command }),
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-[var(--spacing-system-xxs)]", children: [
+    /* @__PURE__ */ jsxs2("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", children: [
+      /* @__PURE__ */ jsx2("code", { className: "text-h6 text-ods-text-primary flex-1 whitespace-pre-wrap break-words", children: data.command }),
       data.icon && /* @__PURE__ */ jsx2("div", { className: "w-4 h-4 shrink-0 text-ods-text-tertiary", children: data.icon })
     ] }),
-    data.fields && data.fields.length > 0 ? /* @__PURE__ */ jsx2(ApprovalFieldList, { fields: data.fields }) : data.explanation && /* @__PURE__ */ jsx2("p", { className: "font-['DM_Sans'] font-medium text-sm text-ods-text-secondary leading-5 whitespace-pre-line break-words", children: data.explanation })
+    data.fields && data.fields.length > 0 ? /* @__PURE__ */ jsx2(ApprovalFieldList, { fields: data.fields }) : data.explanation && /* @__PURE__ */ jsx2("p", { className: "text-h6 text-ods-text-secondary whitespace-pre-line break-words", children: data.explanation })
   ] });
 }
 var ApprovalRequestMessage = forwardRef(
-  ({ 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 () => {
       setIsProcessing(true);
@@ -558,13 +561,13 @@ var ApprovalRequestMessage = forwardRef(
       {
         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,
         children: [
           /* @__PURE__ */ jsx2(ApprovalCardBody, { data }),
-          status === "pending" ? /* @__PURE__ */ jsxs2("div", { className: "flex gap-4 items-center", children: [
+          status === "pending" ? /* @__PURE__ */ jsxs2("div", { className: "flex gap-[var(--spacing-system-mf)] items-center", children: [
             /* @__PURE__ */ jsx2(
               Button,
               {
@@ -574,8 +577,8 @@ var ApprovalRequestMessage = forwardRef(
                 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"
                 ),
                 children: "Approve"
               }
@@ -589,20 +592,13 @@ var ApprovalRequestMessage = forwardRef(
                 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"
                 ),
                 children: "Reject"
               }
             )
-          ] }) : /* @__PURE__ */ jsx2("div", { className: "flex", children: /* @__PURE__ */ jsx2(
-            Tag,
-            {
-              label: status === "approved" ? "Approved" : "Rejected",
-              variant: status === "approved" ? "success" : "error",
-              icon: status === "approved" ? /* @__PURE__ */ jsx2(CheckCircle, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx2(XCircle, { className: "w-4 h-4" })
-            }
-          ) })
+          ] }) : /* @__PURE__ */ jsx2("div", { className: "flex", children: status === "approved" ? /* @__PURE__ */ jsx2(Tag, { label: "Approved", variant: "success", icon: /* @__PURE__ */ jsx2(CheckCircle, { className: "w-4 h-4" }) }) : status === "cancelled" ? /* @__PURE__ */ jsx2(Tag, { label: "Canceled", variant: "grey", icon: /* @__PURE__ */ jsx2(Ban, { className: "w-4 h-4" }) }) : /* @__PURE__ */ jsx2(Tag, { label: "Rejected", variant: "error", icon: /* @__PURE__ */ jsx2(XCircle, { className: "w-4 h-4" }) }) })
         ]
       }
     );
@@ -771,10 +767,11 @@ function formatToolResult(value) {
 
 // src/components/chat/tool-call-blocks.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var 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";
 function ArgRow({ argKey, value }) {
   const formatted = formatToolArgValue(value);
   if (formatted.kind === "inline") {
-    return /* @__PURE__ */ jsxs3("div", { className: "flex gap-1 items-start w-full", children: [
+    return /* @__PURE__ */ jsxs3("div", { className: "flex gap-[var(--spacing-system-xxs)] items-start w-full", children: [
       /* @__PURE__ */ jsxs3("span", { className: "shrink-0 text-ods-text-secondary", children: [
         argKey,
         ":"
@@ -782,40 +779,41 @@ function ArgRow({ argKey, value }) {
       /* @__PURE__ */ jsx4("span", { className: "flex-1 min-w-0 text-ods-text-primary break-all", children: formatted.text })
     ] });
   }
-  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1 items-start w-full", children: [
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-[var(--spacing-system-xxs)] items-start w-full", children: [
     /* @__PURE__ */ jsxs3("span", { className: "text-ods-text-secondary", children: [
       argKey,
       ":"
     ] }),
-    /* @__PURE__ */ jsx4("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", children: /* @__PURE__ */ jsx4("code", { children: formatted.text }) })
+    /* @__PURE__ */ jsx4("pre", { className: CODE_PRE_CLASS, children: /* @__PURE__ */ jsx4("code", { children: formatted.text }) })
   ] });
 }
 function ResultBlock({ result, className }) {
   const formatted = formatToolResult(result);
   if (!formatted.text) return null;
   if (formatted.kind === "inline") {
-    return /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col gap-1 items-start w-full", className), children: [
+    return /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col gap-[var(--spacing-system-xxs)] items-start w-full", className), children: [
       /* @__PURE__ */ jsx4("span", { className: "text-ods-text-secondary", children: "Result:" }),
       /* @__PURE__ */ jsx4("span", { className: "text-ods-text-primary break-all", children: formatted.text })
     ] });
   }
-  return /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col gap-1 items-start w-full", className), children: [
+  return /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col gap-[var(--spacing-system-xxs)] items-start w-full", className), children: [
     /* @__PURE__ */ jsx4("span", { className: "text-ods-text-secondary", children: "Result:" }),
-    /* @__PURE__ */ jsx4("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", children: /* @__PURE__ */ jsx4("code", { children: formatted.text }) })
+    /* @__PURE__ */ jsx4("pre", { className: CODE_PRE_CLASS, children: /* @__PURE__ */ jsx4("code", { children: formatted.text }) })
   ] });
 }
 
 // src/components/chat/approval-batch-message.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var COMMAND_BODY_KEYS = new Set(COMMAND_BODY_ARG_KEYS);
-function renderStatusTag(status) {
+function renderStatusTag(status, isClient, resolvedByName) {
+  const suffix = isClient && resolvedByName ? ` by ${resolvedByName}` : "";
   if (status === "approved") {
-    return /* @__PURE__ */ jsx5(Tag, { label: "Approved", variant: "success", icon: /* @__PURE__ */ jsx5(CheckCircleIcon, { className: "w-4 h-4" }) });
+    return /* @__PURE__ */ jsx5(Tag, { label: `Approved${suffix}`, variant: "success", icon: /* @__PURE__ */ jsx5(CheckCircleIcon, { className: "w-4 h-4" }) });
   }
   if (status === "cancelled") {
-    return /* @__PURE__ */ jsx5(Tag, { label: "Cancelled", variant: "grey", icon: /* @__PURE__ */ jsx5(XmarkIcon, { className: "w-4 h-4" }) });
+    return /* @__PURE__ */ jsx5(Tag, { label: `Canceled${suffix}`, variant: "grey", icon: /* @__PURE__ */ jsx5(XmarkIcon, { className: "w-4 h-4" }) });
   }
-  return /* @__PURE__ */ jsx5(Tag, { label: "Rejected", variant: "error", icon: /* @__PURE__ */ jsx5(XmarkCircleIcon, { className: "w-4 h-4" }) });
+  return /* @__PURE__ */ jsx5(Tag, { label: `Rejected${suffix}`, variant: "error", icon: /* @__PURE__ */ jsx5(XmarkCircleIcon, { className: "w-4 h-4" }) });
 }
 function getArgEntries(call) {
   const args = call.toolCallArguments;
@@ -831,47 +829,66 @@ function ExecutionStatusIcon({
   if (execution.success === false) return /* @__PURE__ */ jsx5(XmarkCircleIcon, { className: "w-4 h-4 text-ods-error" });
   return /* @__PURE__ */ jsx5(CheckCircleIcon, { className: "w-4 h-4 text-ods-success" });
 }
-function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExecutionStatus }) {
+function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExecutionStatus, isClient }) {
   const command = getCommandText(call);
   const args = getArgEntries(call);
   const toolType = call.toolType || "OPENFRAME";
   const { innerRef, containerStyle } = useCollapsible({ expanded });
   const result = execution?.status === "done" ? execution.result : void 0;
   const hasExpandableBody = args.length > 0 || typeof result === "string" && result.length > 0;
-  return /* @__PURE__ */ jsxs4("div", { className: "bg-ods-card border-b border-ods-border last:border-b-0 flex flex-col items-start w-full", children: [
-    /* @__PURE__ */ jsxs4(
-      "button",
-      {
-        type: "button",
-        onClick: onToggle,
-        className: "flex gap-2 items-start w-full p-3 cursor-pointer text-left",
-        children: [
-          /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-center shrink-0 w-5 h-5", children: /* @__PURE__ */ jsx5(ToolIcon, { toolType, size: 16 }) }),
-          /* @__PURE__ */ jsx5(
-            "div",
-            {
-              className: cn(
-                "flex-1 min-w-0 font-medium text-sm leading-5",
-                expanded ? "text-ods-text-primary whitespace-pre-wrap break-all" : "text-ods-text-secondary line-clamp-2 max-h-10 break-all"
+  return /* @__PURE__ */ jsxs4(
+    "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"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs4(
+          "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",
+            children: [
+              !isClient && /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-center shrink-0 w-5 h-5", children: /* @__PURE__ */ jsx5(ToolIcon, { toolType, size: 16 }) }),
+              /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  className: cn(
+                    "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"
+                  ),
+                  children: command
+                }
               ),
-              children: command
+              showExecutionStatus && /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-center shrink-0 w-5 h-5", children: /* @__PURE__ */ jsx5(ExecutionStatusIcon, { batchStatus, execution }) }),
+              /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-center shrink-0 w-5 h-5", children: /* @__PURE__ */ jsx5(ExpandChevron, { expanded }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx5("div", { className: "w-full", style: containerStyle, children: /* @__PURE__ */ jsx5("div", { ref: innerRef, children: hasExpandableBody && /* @__PURE__ */ jsxs4("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", children: [
+          args.map(([key, value]) => /* @__PURE__ */ jsx5(ArgRow, { argKey: key, value }, key)),
+          result && /* @__PURE__ */ jsx5(
+            ResultBlock,
+            {
+              result,
+              className: args.length > 0 ? "mt-[var(--spacing-system-xsf)]" : void 0
             }
-          ),
-          showExecutionStatus && /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-center shrink-0 w-5 h-5", children: /* @__PURE__ */ jsx5(ExecutionStatusIcon, { batchStatus, execution }) }),
-          /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-center shrink-0 w-5 h-5", children: /* @__PURE__ */ jsx5(ExpandChevron, { expanded }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx5("div", { className: "w-full", style: containerStyle, children: /* @__PURE__ */ jsx5("div", { ref: innerRef, children: hasExpandableBody && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2 items-start w-full text-sm font-medium leading-5 p-3 bg-ods-card", children: [
-      args.map(([key, value]) => /* @__PURE__ */ jsx5(ArgRow, { argKey: key, value }, key)),
-      result && /* @__PURE__ */ jsx5(ResultBlock, { result })
-    ] }) }) })
-  ] });
+          )
+        ] }) }) })
+      ]
+    }
+  );
 }
 var ApprovalBatchMessage = forwardRef2(
-  ({ 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] = useState3(null);
     const [isProcessing, setIsProcessing] = useState3(false);
+    const isClient = assistantType === "fae";
     const explanations = data.toolCalls.map((c) => c.toolExplanation?.trim()).filter((s) => !!s);
     const handleApprove = async () => {
       setIsProcessing(true);
@@ -895,7 +912,10 @@ var ApprovalBatchMessage = forwardRef2(
       {
         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,
@@ -903,7 +923,11 @@ var ApprovalBatchMessage = forwardRef2(
           /* @__PURE__ */ jsx5(
             "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 } : void 0,
               children: data.toolCalls.map((call) => /* @__PURE__ */ jsx5(
                 ToolCallRow,
@@ -915,53 +939,65 @@ var ApprovalBatchMessage = forwardRef2(
                   ),
                   batchStatus: status,
                   execution: data.executions?.[call.toolExecutionRequestId],
-                  showExecutionStatus
+                  showExecutionStatus,
+                  isClient
                 },
                 call.toolExecutionRequestId
               ))
             }
           ),
-          showFooterBlock && /* @__PURE__ */ jsxs4("div", { className: "bg-ods-card flex flex-col gap-2 items-start justify-center p-3", children: [
-            explanations.length > 0 && /* @__PURE__ */ jsx5("ul", { className: "list-disc pl-5 text-sm font-medium text-ods-text-primary leading-5 w-full", children: explanations.map((expl, i) => /* @__PURE__ */ jsx5("li", { children: expl }, i)) }),
-            status === "pending" ? /* @__PURE__ */ jsxs4("div", { className: "flex gap-2 items-center", children: [
-              /* @__PURE__ */ jsx5(
-                Button,
-                {
-                  size: "small-legacy",
-                  variant: "accent",
-                  onClick: handleApprove,
-                  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"
-                  ),
-                  children: "Approve"
-                }
+          showFooterBlock && /* @__PURE__ */ jsxs4(
+            "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)]"
               ),
-              /* @__PURE__ */ jsx5(
-                Button,
-                {
-                  size: "small-legacy",
-                  variant: "outline",
-                  onClick: handleReject,
-                  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"
+              children: [
+                explanations.length > 0 && /* @__PURE__ */ jsx5("ul", { className: "list-disc pl-5 text-h6 text-ods-text-primary w-full", children: explanations.map((expl, i) => /* @__PURE__ */ jsx5("li", { children: expl }, i)) }),
+                status === "pending" ? /* @__PURE__ */ jsxs4("div", { className: "flex gap-[var(--spacing-system-xsf)] items-center", children: [
+                  /* @__PURE__ */ jsx5(
+                    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"
+                      ),
+                      children: "Approve"
+                    }
                   ),
-                  children: "Reject"
-                }
-              )
-            ] }) : /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
-              renderStatusTag(status),
-              resolvedByName && /* @__PURE__ */ jsxs4("span", { className: "text-h6 text-ods-text-secondary", children: [
-                "by ",
-                resolvedByName
-              ] })
-            ] })
-          ] })
+                  /* @__PURE__ */ jsx5(
+                    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"
+                      ),
+                      children: "Reject"
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-[var(--spacing-system-xsf)]", children: [
+                  renderStatusTag(status, isClient, resolvedByName),
+                  !isClient && resolvedByName && /* @__PURE__ */ jsxs4("span", { className: "text-h6 text-ods-text-secondary", children: [
+                    "by ",
+                    resolvedByName
+                  ] })
+                ] })
+              ]
+            }
+          )
         ]
       }
     );
@@ -4336,9 +4372,10 @@ import { forwardRef as forwardRef10, useMemo as useMemo4, useState as useState9
 import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var COMMAND_BODY_KEYS2 = new Set(COMMAND_BODY_ARG_KEYS);
 var ToolExecutionDisplay = forwardRef10(
-  ({ className, message: message2, ...props }, ref) => {
+  ({ className, message: message2, assistantType, ...props }, ref) => {
     const [expanded, setExpanded] = useState9(false);
     const { innerRef, containerStyle } = useCollapsible({ expanded });
+    const isClient = assistantType === "fae";
     const isExecuting = message2.type === "EXECUTING_TOOL";
     const isExecuted = message2.type === "EXECUTED_TOOL";
     const integratedToolType = message2.integratedToolType || "OPENFRAME";
@@ -4369,6 +4406,8 @@ var ToolExecutionDisplay = forwardRef10(
       {
         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
         ),
@@ -4381,12 +4420,12 @@ var ToolExecutionDisplay = forwardRef10(
               className: "flex gap-[var(--spacing-system-xs)] items-start p-[var(--spacing-system-s)] cursor-pointer text-left w-full",
               onClick: () => setExpanded((prev) => !prev),
               children: [
-                /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center shrink-0 w-5 h-5", children: /* @__PURE__ */ jsx21(ToolIcon, { toolType: integratedToolType, size: 16 }) }),
+                !isClient && /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center shrink-0 w-5 h-5", children: /* @__PURE__ */ jsx21(ToolIcon, { toolType: integratedToolType, size: 16 }) }),
                 /* @__PURE__ */ jsx21(
                   "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"
                     ),
                     children: previewText
@@ -4397,13 +4436,28 @@ var ToolExecutionDisplay = forwardRef10(
               ]
             }
           ),
-          /* @__PURE__ */ jsx21("div", { className: "w-full", style: containerStyle, children: /* @__PURE__ */ jsx21("div", { ref: innerRef, children: hasBody && /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-2 items-start w-full text-sm font-medium leading-5 p-3 bg-ods-card", children: [
+          /* @__PURE__ */ jsx21("div", { className: "w-full", style: containerStyle, children: /* @__PURE__ */ jsx21("div", { ref: innerRef, children: hasBody && /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-0 items-start w-full text-h6 p-[var(--spacing-system-sf)] bg-ods-card", children: [
             argEntries.map(([key, value]) => /* @__PURE__ */ jsx21(ArgRow, { argKey: key, value }, key)),
-            hasResult && /* @__PURE__ */ jsx21(ResultBlock, { result: message2.result }),
-            isExecuting && /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-1 items-start w-full", children: [
-              /* @__PURE__ */ jsx21("span", { className: "text-ods-text-secondary", children: "Result:" }),
-              /* @__PURE__ */ jsx21(DotsLoaderIcon, { size: 16, className: "text-ods-text-secondary" })
-            ] })
+            hasResult && /* @__PURE__ */ jsx21(
+              ResultBlock,
+              {
+                result: message2.result,
+                className: argEntries.length > 0 ? "mt-[var(--spacing-system-xsf)]" : void 0
+              }
+            ),
+            isExecuting && /* @__PURE__ */ jsxs17(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col gap-[var(--spacing-system-xxs)] items-start w-full",
+                  argEntries.length > 0 && "mt-[var(--spacing-system-xsf)]"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx21("span", { className: "text-ods-text-secondary", children: "Result:" }),
+                  /* @__PURE__ */ jsx21(DotsLoaderIcon, { size: 16, className: "text-ods-text-secondary" })
+                ]
+              }
+            )
           ] }) }) })
         ]
       }
@@ -5159,7 +5213,8 @@ var ChatMessageEnhanced = forwardRef11(
               return /* @__PURE__ */ jsx24(
                 ToolExecutionDisplay,
                 {
-                  message: segment.data
+                  message: segment.data,
+                  assistantType
                 },
                 index
               );
@@ -5170,7 +5225,8 @@ var ChatMessageEnhanced = forwardRef11(
                   data: segment.data,
                   status: segment.status,
                   onApprove: segment.onApprove,
-                  onReject: segment.onReject
+                  onReject: segment.onReject,
+                  assistantType
                 },
                 index
               );
@@ -5182,7 +5238,8 @@ var ChatMessageEnhanced = forwardRef11(
                   status: segment.status,
                   resolvedByName: segment.resolvedByName,
                   onApprove: segment.onApprove,
-                  onReject: segment.onReject
+                  onReject: segment.onReject,
+                  assistantType
                 },
                 index
               );
@@ -50392,4 +50449,4 @@ export {
   LogsList,
   assets
 };
-//# sourceMappingURL=chunk-A6YFD2SK.js.map
+//# sourceMappingURL=chunk-OKGXLXDW.js.map