@flamingo-stack/openframe-frontend-core 0.0.354 → 0.0.355-snapshot.20260701201047

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.354",
+  "version": "0.0.355-snapshot.20260701201047",
   "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,7 +9,7 @@ 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, ResultBlock } from "./tool-call-blocks"
+import { ArgRow, CommandBlock, ResultBlock } from "./tool-call-blocks"
 import type {
   AssistantType,
   ApprovalBatchExecutionState,
@@ -18,6 +18,7 @@ import type {
 } from "./types"
 import {
   COMMAND_BODY_ARG_KEYS,
+  getCommandBody,
   getCommandText,
 } from "./utils/tool-call-helpers"
 
@@ -114,7 +115,13 @@ function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExe
   const toolType = (call.toolType as ToolType) || ("OPENFRAME" as ToolType)
   const { innerRef, containerStyle } = useCollapsible({ expanded })
   const result = execution?.status === "done" ? execution.result : undefined
-  const hasExpandableBody = args.length > 0 || (typeof result === "string" && result.length > 0)
+  // 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)
 
   return (
     <div
@@ -146,7 +153,7 @@ function ToolCallRow({ call, expanded, onToggle, batchStatus, execution, showExe
               : "text-ods-text-secondary line-clamp-2 max-h-10 break-all",
           )}
         >
-          {command}
+          {headerText}
         </div>
         {showExecutionStatus && (
           <div className="flex items-center justify-center shrink-0 w-5 h-5">
@@ -162,6 +169,12 @@ 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} />
               ))}
@@ -185,9 +198,12 @@ const ApprovalBatchMessage = forwardRef<HTMLDivElement, ApprovalBatchMessageProp
     const [isProcessing, setIsProcessing] = useState(false)
     const isClient = assistantType === "fae"
 
-    const explanations = data.toolCalls
-      .map((c) => c.toolExplanation?.trim())
-      .filter((s): s is string => !!s)
+    // 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 handleApprove = async () => {
       setIsProcessing(true)

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

@@ -67,3 +67,17 @@ export function ResultBlock({ result, className }: { result: string | undefined
     </div>
   )
 }
+
+/**
+ * Raw command/script body as an unlabeled code block. Used by the CLIENT (Fae)
+ * card in the expanded state, where the collapsed line shows the human-readable
+ * `toolExplanation` and the actual command moves into the body (Figma 1972-6100).
+ */
+export function CommandBlock({ command, className }: { command: string; className?: string }) {
+  if (!command) return null
+  return (
+    <pre className={cn(CODE_PRE_CLASS, className)}>
+      <code>{command}</code>
+    </pre>
+  )
+}

package/src/components/chat/utils/tool-call-helpers.ts

@@ -42,6 +42,22 @@ export function getCommandText(call: PendingToolCallData): string {
   })
 }
 
+/**
+ * The raw command/query/script body only (first {@link COMMAND_BODY_ARG_KEYS}
+ * match), with no title/name fallback. Used by the CLIENT (Fae) card to show
+ * the command in the expanded body once the collapsed line switches to the
+ * human-readable `toolExplanation`.
+ */
+export function getCommandBody(args?: Record<string, unknown> | null): string | undefined {
+  if (args && typeof args === 'object') {
+    for (const key of COMMAND_BODY_ARG_KEYS) {
+      const candidate = args[key]
+      if (typeof candidate === 'string' && candidate.trim()) return candidate
+    }
+  }
+  return undefined
+}
+
 export type FormattedArgValue =
   | { kind: 'inline'; text: string }
   | { kind: 'block'; text: string; language: 'json' | 'text' }

package/src/stories/ApprovalBatchMessageClient.stories.tsx

@@ -30,6 +30,10 @@ const toolCall: PendingToolCallData = {
 	toolExecutionRequestId: REQUEST_ID,
 	toolName: "run_script",
 	toolTitle: "Run Script",
+	// Human-readable description shown as the collapsed row header (CLIENT);
+	// the raw command moves into the expanded body (Figma 1972-6100).
+	toolExplanation:
+		"Collects today's system, application, and security event logs and exports them to a CSV file.",
 	toolType: "TACTICAL_RMM",
 	requiresApproval: true,
 	approvalType: "CLIENT",

package/src/types/tool.types.ts

@@ -31,7 +31,7 @@ export const toolLabels: Record<ToolType, string> = {
   OPENFRAME: 'OpenFrame',
   OPENFRAME_CHAT: 'OpenFrame Chat',
   OPENFRAME_CLIENT: 'OpenFrame Client',
-  OPENFRAME_RMM: 'OpenFrame RMM',
+  OPENFRAME_RMM: 'RMM',
   OSQUERY: 'Osquery',
   SYSTEM: 'System'
 }