@flamingo-stack/openframe-frontend-core 0.0.186 → 0.0.188

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

@@ -1,10 +1,8 @@
 "use client"
 
-import { forwardRef, memo, useMemo } from "react"
+import React, { forwardRef, memo, useMemo } from "react"
 import { cn } from "../../utils/cn"
 import { SquareAvatar } from "../ui/square-avatar"
-import { ChatTypingIndicator } from "./chat-typing-indicator"
-import { CyclingPhrase } from "./cycling-phrase"
 import { ToolExecutionDisplay } from "./tool-execution-display"
 import { ApprovalRequestMessage } from "./approval-request-message"
 import { ApprovalBatchMessage } from "./approval-batch-message"
@@ -14,8 +12,17 @@ import { ThinkingDisplay } from "./thinking-display"
 import { SimpleMarkdownRenderer } from "../ui/simple-markdown-renderer"
 import type { ChatRef } from "./chat-ref.types"
 import { remarkCardLinks } from "./remark-card-links"
+import { BlockCard, type BlockCardProps } from "./block-card"
 import type { MessageSegment, MessageContent, ChatMessageEnhancedProps } from "./types"
 
+/**
+ * Same regex shape as `remarkCardLinks` — kept in lockstep so the
+ * pre-scan and the remark plugin see the SAME set of markers. If the
+ * grammar widens (today: snake_case OR kebab-case; closer `]` OR `)`),
+ * both files must update.
+ */
+const CARD_MARKER_REGEX = /\[card:\/\/([a-zA-Z0-9_-]+):([a-zA-Z0-9_-]+)[\])]/g
+
 function normalizeContent(content: MessageContent): MessageSegment[] {
   if (typeof content === 'string') {
     return content ? [{ type: 'text', text: content }] : []
@@ -23,22 +30,6 @@ function normalizeContent(content: MessageContent): MessageSegment[] {
   return content
 }
 
-// Flamingo-themed cycling words shown next to the streaming indicator
-// (Claude-Code-style activity hint). Mix of classic AI verbs, flamingo
-// behaviours (strut/wade/preen/flock), and one Mingo neologism.
-const STREAMING_WORDS = [
-  'Thinking',
-  'Vibing',
-  'Mingoing',
-  'Strutting',
-  'Pondering',
-  'Wading',
-  'Hatching',
-  'Preening',
-  'Conjuring',
-  'Riffing',
-] as const
-
 const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>(
   ({ className, role, content, name, avatar, isTyping = false, timestamp, showAvatar = true, assistantType, authorType: authorTypeProp, assistantIcon, chatRefs, renderEntityCard, ...props }, ref) => {
     const isUser = role === 'user'
@@ -63,15 +54,113 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
       () => (hasMarkerSupport ? [remarkCardLinks] : []),
       [hasMarkerSupport],
     )
+
+    const segments = useMemo(() => normalizeContent(content), [content])
+
+    /**
+     * Per-message rendering plan for `[card://type:id]` markers.
+     *
+     * Block-bearing markers SPLIT their containing text segment so the
+     * block payload (e.g. video player) renders AT THE MARKER POSITION
+     * in the text flow — not at the end of the segment, which causes
+     * the block to "appear high and drift down" while text streams in.
+     *
+     * Per-segment output is an array of parts:
+     *   - `{ kind: 'text' }` — substring of the segment text, rendered
+     *                         through `<SimpleMarkdownRenderer>`. Ends
+     *                         with the block marker so the inline pill
+     *                         lands at the right spot via the `<a>`
+     *                         override.
+     *   - `{ kind: 'block' }` — block payload, rendered as a sibling
+     *                         BELOW the preceding text chunk and above
+     *                         the next one.
+     *
+     * Inline-only markers (no `<BlockCard>` wrapper) do NOT split the
+     * segment; they're handled by the override at marker position via
+     * the shared `inlineByKey` map.
+     *
+     * Streaming behaviour: as a marker becomes complete in the streamed
+     * text, the regex matches, the segment splits at that point, and
+     * the block card lands right after the inline pill. Subsequent
+     * tokens render in the trailing chunk — block stays in position.
+     */
+    const renderingPlan = useMemo(() => {
+      if (!hasMarkerSupport) return null
+      const refs = chatRefs ?? {}
+      const render = renderEntityCard
+      const inlineByKey = new Map<string, React.ReactNode>()
+      type SegmentPart =
+        | { kind: 'text'; text: string }
+        | { kind: 'block'; key: string; node: React.ReactNode }
+      const partsBySegment = new Map<number, SegmentPart[]>()
+      if (!render) return { inlineByKey, partsBySegment }
+      const seenRendered = new Map<string, React.ReactNode>()
+      segments.forEach((segment, segIdx) => {
+        if (segment.type !== 'text') return
+        const text = segment.text
+        const parts: SegmentPart[] = []
+        let cursor = 0
+        CARD_MARKER_REGEX.lastIndex = 0
+        let match: RegExpExecArray | null
+        while ((match = CARD_MARKER_REGEX.exec(text)) !== null) {
+          const cardType = match[1]
+          const cardId = match[2]
+          const key = `${cardType}:${cardId}`
+          // Dedup renderEntityCard calls per unique key across the
+          // whole message — same key emitted twice (rare but possible)
+          // returns the cached node so React reuses the same instance.
+          let rendered = seenRendered.get(key)
+          if (!seenRendered.has(key)) {
+            const refMatch = refs[key]
+            rendered = refMatch ? render(refMatch) : undefined
+            seenRendered.set(key, rendered)
+          }
+          if (React.isValidElement(rendered) && rendered.type === BlockCard) {
+            const props = rendered.props as BlockCardProps
+            const markerEnd = match.index + match[0].length
+            // Text chunk INCLUDING the marker — the inline pill renders
+            // at the marker position via the `<a>` override.
+            parts.push({ kind: 'text', text: text.slice(cursor, markerEnd) })
+            parts.push({ kind: 'block', key, node: props.children })
+            cursor = markerEnd
+            const refMatch = refs[key]
+            inlineByKey.set(
+              key,
+              props.inline != null
+                ? props.inline
+                : <span className="text-ods-text-primary font-medium">{refMatch?.title ?? cardId}</span>,
+            )
+          } else if (rendered != null) {
+            // Inline-only — no split; remembered for the override.
+            inlineByKey.set(key, rendered)
+          }
+        }
+        // Trailing text after the last block marker (or the entire
+        // segment when no block markers fired).
+        if (cursor < text.length) {
+          parts.push({ kind: 'text', text: text.slice(cursor) })
+        }
+        // Only register the split plan when at least one block marker
+        // fired — otherwise the segment renders as one SimpleMarkdown-
+        // Renderer call (existing behaviour preserved for the
+        // overwhelming majority of segments that have no block cards).
+        if (parts.some((p) => p.kind === 'block')) {
+          partsBySegment.set(segIdx, parts)
+        }
+      })
+      return { inlineByKey, partsBySegment }
+    }, [hasMarkerSupport, chatRefs, renderEntityCard, segments])
+
     const cardComponentOverrides = useMemo(() => {
       if (!hasMarkerSupport) return undefined
       const refs = chatRefs ?? {}
-      const render = renderEntityCard
+      const inlineByKey = renderingPlan?.inlineByKey
       return {
-        // Override `<a>` to detect `card://` URLs emitted by `remarkCardLinks`
-        // and delegate rendering to the host. Other href schemes pass
-        // through unchanged — react-markdown's default `<a>` handler covers
-        // them.
+        // Override `<a>` to detect `card://` URLs emitted by `remarkCardLinks`.
+        // The render result was pre-computed in `renderingPlan` so block-level
+        // payloads (e.g. video player cards) can be hoisted out of the
+        // paragraph as siblings — the inline pill stays at the marker
+        // position. Other href schemes pass through unchanged.
         a: ({ href, children, className: linkClassName, ...rest }: any) => {
           if (typeof href === 'string' && href.startsWith('card://')) {
             const stripped = href.slice('card://'.length)
@@ -80,15 +169,13 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
               const cardType = stripped.slice(0, sepIdx)
               const cardId = stripped.slice(sepIdx + 1)
               const key = `${cardType}:${cardId}`
-              const refMatch: ChatRef | undefined = refs[key]
-              if (refMatch && render) {
-                const rendered = render(refMatch)
-                if (rendered != null) return rendered
-              }
+              const inline = inlineByKey?.get(key)
+              if (inline != null) return inline
               // No renderer, no ref, OR renderer returned null — fall back
               // to plain text title-only. Use any same-type ref's title if
               // available; otherwise the bare cardId. Never render the
               // literal `card://` URL.
+              const refMatch: ChatRef | undefined = refs[key]
               const fallbackTitle = (refMatch?.title)
                 ?? Object.values(refs).find((r) => r.type === cardType)?.title
                 ?? cardId
@@ -108,7 +195,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
           )
         },
       }
-    }, [hasMarkerSupport, chatRefs, renderEntityCard])
+    }, [hasMarkerSupport, chatRefs, renderingPlan])
 
     const getAvatarProps = () => {
       const displayName = name || (isUser ? "User" : assistantType === 'mingo' ? "Mingo" : "Fae")
@@ -133,20 +220,9 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
     }
     
     const avatarProps = getAvatarProps()
-    const segments = normalizeContent(content)
 
     const isSystem = authorType === 'system'
 
-    // While `isTyping` says streaming is active, the agent is actually
-    // PAUSED whenever the last segment is an approval awaiting user
-    // input — pending status (or undefined, which is the initial state
-    // before backend confirms). Showing the typing indicator in this
-    // state would lie to the user about what's happening.
-    const lastSegment = segments[segments.length - 1]
-    const isPausedOnApproval = !!lastSegment
-      && (lastSegment.type === 'approval_request' || lastSegment.type === 'approval_batch')
-      && (lastSegment.status === undefined || lastSegment.status === 'pending')
-
     return (
       <div
         ref={ref}
@@ -196,19 +272,58 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
           {(!isSystem || segments.length > 0) && <div className="flex flex-col gap-2">
             {segments.map((segment, index) => {
                 if (segment.type === 'text') {
+                  const parts = renderingPlan?.partsBySegment.get(index)
+                  const wrapperClass = cn(
+                    "min-w-0 w-full break-words text-h4",
+                    isError ? "text-ods-error" : "text-ods-text-primary",
+                  )
+                  // No block markers in this segment → single
+                  // SimpleMarkdownRenderer call (existing behaviour
+                  // preserved for the vast majority of messages).
+                  if (!parts || parts.length === 0) {
+                    return (
+                      <div key={index} className={wrapperClass}>
+                        <SimpleMarkdownRenderer
+                          content={segment.text}
+                          textSize="compact"
+                          additionalRemarkPlugins={cardRemarkPlugins}
+                          componentOverrides={cardComponentOverrides}
+                        />
+                      </div>
+                    )
+                  }
+                  // Block markers present → split text at each marker
+                  // and interleave block payloads. Each text chunk
+                  // includes its trailing marker so the inline pill
+                  // renders at the right position via the `<a>`
+                  // override. Block payloads land AS SIBLINGS between
+                  // text chunks — HTML-valid (block DOM never nests
+                  // inside `<p>`) AND positionally correct (block
+                  // appears where the marker is in the flow, not at
+                  // the segment's end). Stable React keys come from
+                  // the card key (block) and chunk position (text);
+                  // streaming token-by-token reuses the same React
+                  // instances so `<Video>` doesn't remount mid-play.
                   return (
-                    <div key={index} className={cn(
-                      "min-w-0 w-full break-words text-h4",
-                      isError
-                        ? "text-ods-error"
-                        : "text-ods-text-primary"
-                    )}>
-                      <SimpleMarkdownRenderer
-                        content={segment.text}
-                        textSize="compact"
-                        additionalRemarkPlugins={cardRemarkPlugins}
-                        componentOverrides={cardComponentOverrides}
-                      />
+                    <div key={index} className={wrapperClass}>
+                      {parts.map((part, pIdx) => {
+                        if (part.kind === 'text') {
+                          return (
+                            <SimpleMarkdownRenderer
+                              key={`t-${pIdx}`}
+                              content={part.text}
+                              textSize="compact"
+                              additionalRemarkPlugins={cardRemarkPlugins}
+                              componentOverrides={cardComponentOverrides}
+                            />
+                          )
+                        }
+                        return (
+                          <div key={`b-${part.key}`} className="my-3">
+                            {part.node}
+                          </div>
+                        )
+                      })}
                     </div>
                   )
                 } else if (segment.type === 'tool_execution') {
@@ -265,15 +380,6 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
                 }
                 return null
               })}
-            {isTyping && !isPausedOnApproval && (
-              <div className="flex items-center gap-3">
-                <ChatTypingIndicator />
-                <CyclingPhrase
-                  words={STREAMING_WORDS}
-                  className="text-ods-text-secondary text-body-sm"
-                />
-              </div>
-            )}
           </div>}
         </div>
       </div>

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

@@ -5,8 +5,26 @@ import { useStickToBottom } from "use-stick-to-bottom"
 import { cn } from "../../utils/cn"
 import { ChatMessageEnhanced } from "./chat-message-enhanced"
 import { ChatMessageListSkeleton } from "./chat-message-skeleton"
+import { DotsLoaderIcon } from "../icons-v2-generated"
+import { CyclingPhrase } from "./cycling-phrase"
 import type { ChatMessageListProps } from "./types"
 
+// Flamingo-themed cycling words shown next to the streaming indicator
+// (Claude-Code-style activity hint). Mix of classic AI verbs, flamingo
+// behaviours (strut/wade/preen/flock), and one Mingo neologism.
+const STREAMING_WORDS = [
+  'Thinking',
+  'Vibing',
+  'Mingoing',
+  'Strutting',
+  'Pondering',
+  'Wading',
+  'Hatching',
+  'Preening',
+  'Conjuring',
+  'Riffing',
+] as const
+
 /*
  * Stick-to-bottom: `use-stick-to-bottom` (stackblitz-labs)
  *
@@ -243,6 +261,26 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
       contentRef(el)
     }
 
+    // Footer-pinned streaming loader. Rendered OUTSIDE the scroller (a
+    // sibling of the scroll div, like the sticky approvals below) so it
+    // stays put while messages stream and grow — no jitter from the
+    // last-message height changing under it.
+    //
+    // Hidden when the agent is actually PAUSED waiting on the user: the
+    // last message's last segment is a pending approval (inline), or
+    // there are escalated pending approvals shown in the sticky bar.
+    const lastMessage = messages[messages.length - 1]
+    const lastSegments = Array.isArray(lastMessage?.content) ? lastMessage.content : null
+    const lastSegment = lastSegments?.[lastSegments.length - 1]
+    const isPausedOnApproval =
+      !!lastSegment &&
+      (lastSegment.type === 'approval_request' || lastSegment.type === 'approval_batch') &&
+      (lastSegment.status === undefined || lastSegment.status === 'pending')
+    const showStreamingLoader =
+      isTyping &&
+      !isPausedOnApproval &&
+      !(pendingApprovals && pendingApprovals.length > 0)
+
     return (
       <div className="relative flex-1 min-h-0 flex flex-col">
         <div
@@ -286,6 +324,25 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
           </div>
         </div>
 
+        {/* Footer-pinned streaming loader — outside the scroller so it
+            doesn't jitter as the streaming message grows. Color is set
+            via inline style (CSS var) rather than a Tailwind class so it
+            is JIT-independent when this lib is consumed via yalc. */}
+        {showStreamingLoader && (
+          <div
+            className={cn(
+              "mx-auto w-full max-w-3xl flex items-center gap-1 py-2",
+              contentClassName || "px-4",
+            )}
+            style={{ color: 'var(--color-text-muted)' }}
+            role="status"
+            aria-live="polite"
+          >
+            <DotsLoaderIcon className="w-6 h-6" />
+            <CyclingPhrase words={STREAMING_WORDS} className="text-sm" />
+          </div>
+        )}
+
         {/* Sticky Pending Approvals — outside the scroller; same
             structure as the v1 baseline. The library's RO watches
             `contentRef` (INSIDE the scroller), so height changes to

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

@@ -14,6 +14,12 @@ export interface ChatRef {
   /** documentType from the host's RAG config (e.g. 'webinar', 'customer_interview').
    *  Treated as opaque by the OSS-lib — the host owns the type vocabulary. */
   type: string
+  /** RagTableConfig.id (e.g. 'data-room-docs', 'webinars'). Drives the
+   *  icon + label lookup in the host's `RAG_SOURCE_DISPLAY` registry —
+   *  same direct-keyed lookup the chips + search results use. Optional
+   *  for backward-compat with older wire payloads; when absent the host
+   *  resolver falls back to reverse-mapping `type → sourceRepo`. */
+  sourceRepo?: string
   /** Primary-key value. Opaque string downstream. */
   id: string
   /** Display title — used for fallback rendering when the host's renderer

package/src/components/chat/chat-video-entity-card.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import React from 'react'
+import { EntityVideoSection } from '../features/entity-video-section'
+import type { ChatRef } from './chat-ref.types'
+
+/**
+ * <ChatVideoEntityCard> — chat-side inline render for video-bearing
+ * entity refs. Reuses `<EntityVideoSection>` (the SAME component the
+ * detail pages use for customer interviews, investor updates, product
+ * releases, and case studies) so the chat surface matches the public
+ * pages 1:1: Full Video / Highlights tabs, YouTube facade vs Mux HLS
+ * routing, native fullscreen, captions, posters.
+ *
+ * Stripped-chrome rendering: just the player + tabs, no title, no
+ * date, no Ask button. The inline pill at the marker position (in the
+ * paragraph above) already shows the title, date, and Ask affordance
+ * via the host's existing compact entity card. Duplicating those
+ * here doubles the UX and steals vertical space inside the chat
+ * panel. v6.1 §B.2.7.
+ *
+ * Activation contract: the host's dispatch routes here only when
+ * `chatRef.metadata.videoUrl`, `youtubeUrl`, or `highlightVideoUrl`
+ * is a non-empty string. URL safety is handled inside `<Video>` (the
+ * single source of truth for player URL routing) — no duplicate
+ * sanitization at the card level.
+ */
+export interface ChatVideoEntityCardProps {
+  /** Required. `metadata.videoUrl` / `youtubeUrl` / `highlightVideoUrl`
+   *  control routing inside `<EntityVideoSection>`. */
+  chatRef: ChatRef
+}
+
+function readString(value: unknown): string | null {
+  return typeof value === 'string' && value.length > 0 ? value : null
+}
+
+export function ChatVideoEntityCard({
+  chatRef,
+}: ChatVideoEntityCardProps): React.ReactElement {
+  const m = chatRef.metadata ?? {}
+  const videoUrl = readString(m.videoUrl)
+  const youtubeUrl = readString(m.youtubeUrl)
+  const poster = readString(m.videoPoster)
+  const highlightUrl = readString(m.highlightVideoUrl)
+  const highlightPoster = readString(m.highlightVideoPoster)
+
+  // No wrapping Card / header — the player is the whole card. The
+  // 16:9 aspect / rounded-corners / border come from <Video>'s own
+  // `layout="centered"` styling inside <EntityVideoSection>.
+  return (
+    <EntityVideoSection
+      mainVideoUrl={videoUrl}
+      youtubeUrl={youtubeUrl}
+      highlightVideoUrl={highlightUrl}
+      highlightVideoThumbnail={highlightPoster}
+      mainVideoPoster={poster}
+      title={chatRef.title}
+      // Intentionally omitted for chat density:
+      //   videoSummary    — assistant text above already covers it.
+      //   MarkdownRenderer — unused when videoSummary is omitted.
+      //   videoBites      — separate ask; chat doesn't surface bites
+      //                     today (planned follow-up).
+    />
+  )
+}

package/src/components/chat/context-compaction-display.tsx

@@ -3,8 +3,7 @@
 import { forwardRef } from "react"
 
 import { cn } from "../../utils/cn"
-import { CheckCircleIcon } from "../icons-v2-generated"
-import { PulseDots } from "../ui/pulse-dots"
+import { CheckCircleIcon, DotsLoaderIcon } from "../icons-v2-generated"
 import type { ContextCompactionDisplayProps } from "./types"
 
 
@@ -28,7 +27,7 @@ const ContextCompactionDisplay = forwardRef<HTMLDivElement, ContextCompactionDis
           {label}
         </span>
         {isStarted ? (
-          <PulseDots size="sm" />
+          <DotsLoaderIcon size={16} className="text-ods-text-secondary" />
         ) : (
           <CheckCircleIcon className="w-4 h-4 text-ods-success shrink-0" />
         )}

package/src/components/chat/index.ts

@@ -12,6 +12,8 @@ export * from './chat-input'
 export * from './slash-command-suggestions'
 export * from './chat-message-enhanced'
 export * from './chat-message-list'
+export * from './chat-video-entity-card'
+export * from './block-card'
 export * from './chat-quick-action'
 export * from './chat-ticket-item'
 export * from './chat-ticket-list'

package/src/components/chat/thinking-display.tsx

@@ -3,7 +3,7 @@
 import { forwardRef, useState } from "react"
 
 import { cn } from "../../utils/cn"
-import { PulseDots } from "../ui/pulse-dots"
+import { DotsLoaderIcon } from "../icons-v2-generated"
 import { SimpleMarkdownRenderer } from "../ui/simple-markdown-renderer"
 import { ExpandChevron } from "./expand-chevron"
 import { useCollapsible } from "./hooks/use-collapsible"
@@ -97,7 +97,7 @@ const ThinkingDisplay = forwardRef<HTMLDivElement, ThinkingDisplayProps>(
             <span className="text-sm font-medium leading-snug text-ods-text-secondary">
               {label}:
             </span>
-            {isStreaming && <PulseDots size="sm" />}
+            {isStreaming && <DotsLoaderIcon size={16} className="text-ods-text-secondary" />}
           </div>
 
           <div className="flex-1 min-w-0" style={containerStyle}>

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

@@ -3,14 +3,13 @@
 import { forwardRef, useMemo, useState } from "react"
 
 import { cn } from "../../utils/cn"
-import { CheckCircleIcon, XmarkCircleIcon } from "../icons-v2-generated"
+import { CheckCircleIcon, DotsLoaderIcon, XmarkCircleIcon } from "../icons-v2-generated"
 import { ToolType } from "../platform"
 import { ToolIcon } from "../tool-icon"
-import { PulseDots } from "../ui/pulse-dots"
 import { ExpandChevron } from "./expand-chevron"
 import { useCollapsible } from "./hooks/use-collapsible"
 import { ArgRow, ResultBlock } from "./tool-call-blocks"
-import { COMMAND_BODY_ARG_KEYS } from "./utils/tool-call-helpers"
+import { COMMAND_BODY_ARG_KEYS, getToolCallTitle } from "./utils/tool-call-helpers"
 import type { ToolExecutionDisplayProps } from "./types"
 
 const COMMAND_BODY_KEYS = new Set<string>(COMMAND_BODY_ARG_KEYS)
@@ -24,11 +23,15 @@ const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProp
     const isExecuted = message.type === "EXECUTED_TOOL"
     const integratedToolType = (message.integratedToolType as ToolType) || ("OPENFRAME" as ToolType)
 
-    const previewText = useMemo(() => {
-      const command = message.parameters?.command ?? message.parameters?.query
-      if (command) return String(command)
-      return message.toolFunction ?? ""
-    }, [message.toolFunction, message.parameters])
+    const previewText = useMemo(
+      () =>
+        getToolCallTitle({
+          args: message.parameters,
+          title: message.toolTitle,
+          name: message.toolFunction,
+        }),
+      [message.parameters, message.toolTitle, message.toolFunction],
+    )
 
     const argEntries = useMemo<Array<[string, unknown]>>(() => {
       if (!message.parameters || typeof message.parameters !== "object") return []
@@ -41,7 +44,7 @@ const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProp
     const hasBody = argEntries.length > 0 || hasResult || isExecuting
 
     const renderStatusIcon = () => {
-      if (isExecuting) return <PulseDots size="sm" />
+      if (isExecuting) return <DotsLoaderIcon size={16} className="text-ods-text-secondary" />
       if (isExecuted && message.success === true) return <CheckCircleIcon className="w-4 h-4 text-ods-success" />
       if (isExecuted && message.success === false) return <XmarkCircleIcon className="w-4 h-4 text-ods-error" />
       return null
@@ -72,7 +75,7 @@ const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProp
                 : "text-ods-text-secondary line-clamp-2 max-h-10 break-all",
             )}
           >
-            {expanded ? message.toolFunction || previewText : previewText}
+            {previewText}
           </div>
           <div className="flex items-center justify-center shrink-0 w-5 h-5">{renderStatusIcon()}</div>
           <div className="flex items-center justify-center shrink-0 w-5 h-5">
@@ -91,7 +94,7 @@ const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProp
                 {isExecuting && (
                   <div className="flex flex-col gap-1 items-start w-full">
                     <span className="text-ods-text-secondary">Result:</span>
-                    <PulseDots size="sm" />
+                    <DotsLoaderIcon size={16} className="text-ods-text-secondary" />
                   </div>
                 )}
               </div>

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

@@ -5,7 +5,7 @@
 
 import type { ChunkData, NatsMessageType, FetchChunksFunction } from './network.types'
 import type { ChatType, ChatApprovalStatus } from './chat.types'
-import type { MessageSegment, PendingToolCallData, TokenUsageData } from './message.types'
+import type { MessageSegment, PendingToolCallData, TokenUsageData, ExecutingToolState } from './message.types'
 
 // ========== Hook Options ==========
 
@@ -150,7 +150,7 @@ export interface UseRealtimeChunkProcessorOptions {
     /** Pending approvals that haven't been resolved */
     pendingApprovals?: Map<string, { command: string; explanation?: string; approvalType: string }>
     /** Executing tools waiting for completion */
-    executingTools?: Map<string, { integratedToolType: string; toolFunction: string; parameters?: Record<string, any> }>
+    executingTools?: Map<string, ExecutingToolState>
     /** Escalated approvals */
     escalatedApprovals?: Map<
       string,

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

@@ -35,6 +35,8 @@ export interface ToolExecutionData {
   type: 'EXECUTING_TOOL' | 'EXECUTED_TOOL'
   integratedToolType: string
   toolFunction: string
+  /** Backend-issued human-readable title (mirrors `PendingToolCallData.toolTitle`). */
+  toolTitle?: string
   parameters?: Record<string, any>
   result?: string
   success?: boolean
@@ -46,6 +48,21 @@ export interface ToolExecutionData {
   toolExecutionRequestId?: string
 }
 
+/**
+ * Snapshot of an in-flight tool kept between the `EXECUTING_TOOL` and
+ * `EXECUTED_TOOL` events. The backend only sends `toolTitle` on
+ * `EXECUTING_TOOL`; carrying this state lets the accumulator restore it onto
+ * the merged `EXECUTED_TOOL` segment instead of falling back to the raw
+ * `toolFunction`.
+ */
+export interface ExecutingToolState {
+  integratedToolType: string
+  toolFunction: string
+  /** Mirrors {@link ToolExecutionData.toolTitle}; absent on `EXECUTED_TOOL`. */
+  toolTitle?: string
+  parameters?: Record<string, any>
+}
+
 // ========== Approval Request Types ==========
 
 export interface ApprovalRequestData {
@@ -171,6 +188,8 @@ export interface ExecutingToolMessageData extends MessageDataBase {
   type: 'EXECUTING_TOOL'
   integratedToolType?: string
   toolFunction?: string
+  /** Backend-issued human-readable title (wire field, mirrors `ChunkData.title`). */
+  title?: string
   parameters?: Record<string, any>
   toolExecutionRequestId?: string
 }
@@ -179,6 +198,8 @@ export interface ExecutedToolMessageData extends MessageDataBase {
   type: 'EXECUTED_TOOL'
   integratedToolType?: string
   toolFunction?: string
+  /** Backend-issued human-readable title (wire field, mirrors `ChunkData.title`). */
+  title?: string
   parameters?: Record<string, any>
   result?: string
   success?: boolean

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

@@ -38,6 +38,8 @@ export interface ChunkData {
   text?: string
   integratedToolType?: string
   toolFunction?: string
+  /** Execution chunks carry the human-readable title as `title`. */
+  title?: string
   parameters?: Record<string, any>
   result?: string
   success?: boolean