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

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 { Ban, CheckCircle, XCircle } from "lucide-react"
+import { CheckCircle, XCircle } from "lucide-react"
 import type { ApprovalRequestMessageProps } from "./types"
 import type { ApprovalRequestField } from "./types/message.types"
 
@@ -18,16 +18,13 @@ import type { ApprovalRequestField } from "./types/message.types"
  */
 function ApprovalFieldList({ fields }: { fields: ApprovalRequestField[] }) {
   return (
-    <dl className="flex flex-col gap-2.5 mt-[var(--spacing-system-xxs)]">
+    <dl className="flex flex-col gap-2.5 mt-1">
       {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="text-h6 text-ods-text-primary whitespace-pre-wrap break-words">
+          <dd className="font-['DM_Sans'] text-sm text-ods-text-primary leading-5 whitespace-pre-wrap break-words">
             {f.value}
           </dd>
         </div>
@@ -52,9 +49,9 @@ function ApprovalCardBody({
   data: ApprovalRequestMessageProps['data']
 }) {
   return (
-    <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">
+    <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">
           {data.command}
         </code>
         {data.icon && (
@@ -67,7 +64,7 @@ function ApprovalCardBody({
         <ApprovalFieldList fields={data.fields} />
       ) : (
         data.explanation && (
-          <p className="text-h6 text-ods-text-secondary whitespace-pre-line break-words">
+          <p className="font-['DM_Sans'] font-medium text-sm text-ods-text-secondary leading-5 whitespace-pre-line break-words">
             {data.explanation}
           </p>
         )
@@ -77,10 +74,7 @@ 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) => {
+  ({ className, data, onApprove, onReject, status = 'pending', ...props }, ref) => {
     const [isProcessing, setIsProcessing] = useState(false)
 
     const handleApprove = async () => {
@@ -105,14 +99,14 @@ const ApprovalRequestMessage = forwardRef<HTMLDivElement, ApprovalRequestMessage
       <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)]",
+          "bg-ods-card border border-ods-border rounded-md p-4 mb-2 flex flex-col gap-4",
           className
         )}
         {...props}
       >
         <ApprovalCardBody data={data} />
         {status === 'pending' ? (
-          <div className="flex gap-[var(--spacing-system-mf)] items-center">
+          <div className="flex gap-4 items-center">
             <Button
               size="small-legacy"
               variant="accent"
@@ -120,8 +114,8 @@ const ApprovalRequestMessage = forwardRef<HTMLDivElement, ApprovalRequestMessage
               disabled={isProcessing}
               className={cn(
                 "bg-ods-accent hover:bg-ods-accent/90",
-                "text-h5 text-ods-bg",
-                "px-[var(--spacing-system-xsf)] h-8"
+                "font-mono font-medium md:!text-sm text-ods-bg uppercase tracking-[-0.28px]",
+                "px-2 py-1 h-auto"
               )}
             >
               Approve
@@ -133,8 +127,8 @@ const ApprovalRequestMessage = forwardRef<HTMLDivElement, ApprovalRequestMessage
               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"
+                "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"
               )}
             >
               Reject
@@ -142,13 +136,11 @@ const ApprovalRequestMessage = forwardRef<HTMLDivElement, ApprovalRequestMessage
           </div>
         ) : (
           <div className="flex">
-            {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" />} />
-            )}
+            <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" />}
+            />
           </div>
         )}
       </div>

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

@@ -537,7 +537,6 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
                     <ToolExecutionDisplay
                       key={index}
                       message={segment.data}
-                      assistantType={assistantType}
                     />
                   )
                 } else if (segment.type === 'approval_request') {
@@ -548,7 +547,6 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
                       status={segment.status}
                       onApprove={segment.onApprove}
                       onReject={segment.onReject}
-                      assistantType={assistantType}
                     />
                   )
                 } else if (segment.type === 'approval_batch') {
@@ -560,7 +558,6 @@ 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,17 +3,6 @@
 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
@@ -24,7 +13,7 @@ export function ArgRow({ argKey, value }: { argKey: string; value: unknown }) {
 
   if (formatted.kind === "inline") {
     return (
-      <div className="flex gap-[var(--spacing-system-xxs)] items-start w-full">
+      <div className="flex gap-1 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>
@@ -32,9 +21,9 @@ export function ArgRow({ argKey, value }: { argKey: string; value: unknown }) {
   }
 
   return (
-    <div className="flex flex-col gap-[var(--spacing-system-xxs)] items-start w-full">
+    <div className="flex flex-col gap-1 items-start w-full">
       <span className="text-ods-text-secondary">{argKey}:</span>
-      <pre className={CODE_PRE_CLASS}>
+      <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">
         <code>{formatted.text}</code>
       </pre>
     </div>
@@ -51,7 +40,7 @@ export function ResultBlock({ result, className }: { result: string | undefined
 
   if (formatted.kind === "inline") {
     return (
-      <div className={cn("flex flex-col gap-[var(--spacing-system-xxs)] items-start w-full", className)}>
+      <div className={cn("flex flex-col gap-1 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>
@@ -59,9 +48,9 @@ export function ResultBlock({ result, className }: { result: string | undefined
   }
 
   return (
-    <div className={cn("flex flex-col gap-[var(--spacing-system-xxs)] items-start w-full", className)}>
+    <div className={cn("flex flex-col gap-1 items-start w-full", className)}>
       <span className="text-ods-text-secondary">Result:</span>
-      <pre className={CODE_PRE_CLASS}>
+      <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">
         <code>{formatted.text}</code>
       </pre>
     </div>

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

@@ -15,10 +15,9 @@ import type { ToolExecutionDisplayProps } from "./types"
 const COMMAND_BODY_KEYS = new Set<string>(COMMAND_BODY_ARG_KEYS)
 
 const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProps>(
-  ({ className, message, assistantType, ...props }, ref) => {
+  ({ className, message, ...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"
@@ -55,8 +54,6 @@ 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,
         )}
@@ -67,14 +64,12 @@ 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)}
         >
-          {!isClient && (
-            <div className="flex items-center justify-center shrink-0 w-5 h-5">
-              <ToolIcon toolType={integratedToolType} size={16} />
-            </div>
-          )}
+          <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-h6",
+              "flex-1 min-w-0 text-sm font-medium leading-5",
               expanded
                 ? "text-ods-text-primary whitespace-pre-wrap break-all"
                 : "text-ods-text-secondary line-clamp-2 max-h-10 break-all",
@@ -91,23 +86,13 @@ const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProp
         <div className="w-full" style={containerStyle}>
           <div ref={innerRef}>
             {hasBody && (
-              <div className="flex flex-col gap-0 items-start w-full text-h6 p-[var(--spacing-system-sf)] bg-ods-card">
+              <div className="flex flex-col gap-2 items-start w-full text-sm font-medium leading-5 p-3 bg-ods-card">
                 {argEntries.map(([key, value]) => (
                   <ArgRow key={key} argKey={key} value={value} />
                 ))}
-                {hasResult && (
-                  <ResultBlock
-                    result={message.result}
-                    className={argEntries.length > 0 ? "mt-[var(--spacing-system-xsf)]" : undefined}
-                  />
-                )}
+                {hasResult && <ResultBlock result={message.result} />}
                 {isExecuting && (
-                  <div
-                    className={cn(
-                      "flex flex-col gap-[var(--spacing-system-xxs)] items-start w-full",
-                      argEntries.length > 0 && "mt-[var(--spacing-system-xsf)]",
-                    )}
-                  >
+                  <div className="flex flex-col gap-1 items-start w-full">
                     <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,9 +461,6 @@ 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 ==========
@@ -474,9 +471,6 @@ export interface ApprovalRequestMessageProps extends HTMLAttributes<HTMLDivEleme
   onReject?: (requestId?: string) => void | Promise<void>
   status?: ChatApprovalStatus
   disabled?: boolean
-  /** Chat identity; drives the CLIENT (Fae) styling. Accepted for parity with
-   *  the batch card. `'fae'` = client, `'mingo'`/undefined = admin. */
-  assistantType?: AssistantType
 }
 
 // ========== Error Message Display Props ==========

package/src/stories/ToolExecutionDisplay.stories.tsx

@@ -52,7 +52,7 @@ const constrainedDecorator =
 	);
 
 const meta = {
-	title: "Chat/Admin/ToolExecutionDisplay",
+	title: "Chat/ToolExecutionDisplay",
 	component: ToolExecutionDisplay,
 	tags: ["autodocs"],
 	parameters: {