@flamingo-stack/openframe-frontend-core 0.0.490 → 0.0.492-1506.3956.1

package/src/components/chat/__tests__/chat-pending-turn.test.tsx

@@ -0,0 +1,230 @@
+/**
+ * Pending-turn + hidden-row contracts.
+ *
+ * Two reader-visible defects this pins against:
+ *
+ *  1. Approving a tool call minted an author-label row with NO body
+ *     ("Michael Assraf:" then nothing). The approval decision is
+ *     out-of-band metadata, so the reducer must not materialize a user
+ *     row for it at all — fixing it at render would leave dead state.
+ *  2. While the model was thinking, the transcript showed a second,
+ *     empty "Mingo:" row ABOVE the footer progress indicator — two
+ *     owners for one pending turn, and an `aria-live` log announcing a
+ *     bare "Mingo". Exactly one affordance must be present.
+ *
+ * Plus the two idioms that must SURVIVE both fixes: a hidden row that
+ * carries real text (auto-continuation directive) stays in state while
+ * never rendering, and the SYSTEM name-only row still renders.
+ */
+
+import { render } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { createChatStreamReducer } from '../stream/chat-stream-reducer'
+import {
+  AUTO_CONTINUATION_DIRECTIVE_PREFIX,
+  buildAutoContinuationDirective,
+} from '../utils/auto-continuation-directive'
+import type { Message } from '../types/message.types'
+
+// ─── Render harness (mirrors chat-message-list.test.tsx) ────────────────────
+
+const scrollToBottom = vi.fn()
+const stopScroll = vi.fn()
+
+function makeRef() {
+  const fn = ((el: HTMLElement | null) => {
+    ;(fn as { current: HTMLElement | null }).current = el
+  }) as ((el: HTMLElement | null) => void) & { current: HTMLElement | null }
+  fn.current = null
+  return fn
+}
+
+vi.mock('use-stick-to-bottom', () => ({
+  useStickToBottom: () => ({
+    scrollRef: makeRef(),
+    contentRef: makeRef(),
+    scrollToBottom,
+    stopScroll,
+  }),
+}))
+
+// Row stub that renders the author label the way the real component does
+// (`Name:`), so "labeled row with no body" is directly assertable.
+vi.mock('../chat-message-enhanced', () => ({
+  ChatMessageEnhanced: ({ name, content }: { name?: string; content: unknown }) => (
+    <div data-testid="row">
+      <span data-testid="row-name">{name ?? ''}</span>
+      <span data-testid="row-body">
+        {typeof content === 'string'
+          ? content
+          : Array.isArray(content)
+            ? content
+                .map((s) => (s && (s as { type?: string }).type === 'text' ? (s as { text: string }).text : '[seg]'))
+                .join('')
+            : ''}
+      </span>
+    </div>
+  ),
+}))
+
+import { ChatMessageList } from '../chat-message-list'
+
+class ObserverStub {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+vi.stubGlobal('IntersectionObserver', ObserverStub)
+vi.stubGlobal('ResizeObserver', ObserverStub)
+
+const names = (c: HTMLElement) =>
+  Array.from(c.querySelectorAll('[data-testid="row-name"]')).map((n) => n.textContent)
+const bodies = (c: HTMLElement) =>
+  Array.from(c.querySelectorAll('[data-testid="row-body"]')).map((n) => n.textContent)
+
+// ─── State-level contracts ─────────────────────────────────────────────────
+
+describe('approval sends mint no visible user row', () => {
+  it('beginSseSend with empty text pushes only the assistant placeholder', () => {
+    const r = createChatStreamReducer({ transport: 'sse' })
+    // What `cardApprove` triggers: ('', { hidden: true, approvalAction }).
+    r.beginSseSend({ text: '', hidden: true, assistantName: 'Mingo AI' })
+
+    expect(r.state.messages).toHaveLength(1)
+    expect(r.state.messages[0].role).toBe('assistant')
+    expect(r.state.messages.some((m) => m.role === 'user')).toBe(false)
+    expect(r.state.streamingPhase).toBe('thinking')
+  })
+
+  it('pushOptimisticSend with empty text likewise mints no user row', () => {
+    const r = createChatStreamReducer({ transport: 'nats' })
+    r.pushOptimisticSend('', true)
+
+    expect(r.state.messages).toHaveLength(1)
+    expect(r.state.messages[0].role).toBe('assistant')
+  })
+
+  it('a normal send still mints the user row', () => {
+    const r = createChatStreamReducer({ transport: 'sse' })
+    r.beginSseSend({ text: 'hello', assistantName: 'Mingo AI' })
+
+    expect(r.state.messages).toHaveLength(2)
+    expect(r.state.messages[0]).toMatchObject({ role: 'user', content: 'hello' })
+    expect(r.state.messages[0].hidden).toBeUndefined()
+  })
+})
+
+describe('hidden rows that carry text', () => {
+  it('an auto-continuation directive IS state (the model sees it) but is flagged hidden', () => {
+    const directive = buildAutoContinuationDirective('create_ticket', { ticketId: '42' })
+    expect(directive.startsWith(AUTO_CONTINUATION_DIRECTIVE_PREFIX)).toBe(true)
+
+    const r = createChatStreamReducer({ transport: 'sse' })
+    r.beginSseSend({ text: directive, hidden: true, assistantName: 'Mingo AI' })
+
+    const userRow = r.state.messages.find((m) => m.role === 'user')
+    expect(userRow?.content).toBe(directive)
+    expect(userRow?.hidden).toBe(true)
+  })
+
+  it('never renders — the raw directive text must not reach the transcript', () => {
+    const directive = buildAutoContinuationDirective('create_ticket', { ticketId: '42' })
+    const messages: Message[] = [
+      { id: 'u1', role: 'user', name: 'Michael Assraf', content: 'my laptop is dead' },
+      { id: 'h1', role: 'user', name: 'Michael Assraf', content: directive, hidden: true },
+      { id: 'a1', role: 'assistant', name: 'Mingo', content: 'Opened a ticket.' },
+    ]
+    const { container } = render(<ChatMessageList dialogId="d" messages={messages} />)
+
+    expect(container.textContent).not.toContain(AUTO_CONTINUATION_DIRECTIVE_PREFIX)
+    expect(bodies(container)).toEqual(['my laptop is dead', 'Opened a ticket.'])
+  })
+})
+
+// ─── Render-level contracts ────────────────────────────────────────────────
+
+describe('a thinking turn has exactly ONE pending affordance', () => {
+  const pending: Message[] = [
+    { id: 'u1', role: 'user', name: 'Michael Assraf', content: 'what is broken?' },
+    { id: 'a1', role: 'assistant', name: 'Mingo', content: '', segments: [] },
+  ]
+
+  it('does not render the empty labeled assistant row while typing', () => {
+    const { container } = render(
+      <ChatMessageList dialogId="d" messages={pending} isTyping />,
+    )
+    // The bare "Mingo" label must be gone from the transcript entirely —
+    // removed from the DOM, not visually hidden (the list is an aria-live
+    // log; a zero-height node would still be announced).
+    expect(names(container)).toEqual(['Michael Assraf'])
+    expect(bodies(container)).toEqual(['what is broken?'])
+    // …and the single remaining owner is the polite status indicator.
+    expect(container.querySelectorAll('[role="status"]')).toHaveLength(1)
+  })
+
+  it('renders the assistant row as soon as it carries text', () => {
+    const withText: Message[] = [
+      pending[0],
+      { id: 'a1', role: 'assistant', name: 'Mingo', content: [{ type: 'text', text: 'Chec' }] },
+    ]
+    const { container } = render(
+      <ChatMessageList dialogId="d" messages={withText} isTyping />,
+    )
+    expect(names(container)).toEqual(['Michael Assraf', 'Mingo'])
+  })
+
+  it('renders the assistant row when it carries a NON-text segment (tool call)', () => {
+    const withTool: Message[] = [
+      pending[0],
+      {
+        id: 'a1',
+        role: 'assistant',
+        name: 'Mingo',
+        content: [
+          { type: 'tool_execution', toolExecutionRequestId: 'e1', status: 'executing' },
+        ] as Message['content'],
+      },
+    ]
+    const { container } = render(
+      <ChatMessageList dialogId="d" messages={withTool} isTyping />,
+    )
+    expect(names(container)).toEqual(['Michael Assraf', 'Mingo'])
+  })
+
+  it('renders the assistant row when it carries ONLY a guide segment', () => {
+    // A `guide` body is the whole visible answer for a how-to question. If
+    // the empty-pending-turn predicate ever counted it as "nothing visible"
+    // (e.g. by widening its text-only clause), a guide-only turn would render
+    // NOTHING until the turn ended — the footer loader would be the sole
+    // affordance while a fully-formed guide card sat in state.
+    const withGuide: Message[] = [
+      pending[0],
+      {
+        id: 'a1',
+        role: 'assistant',
+        name: 'Mingo',
+        content: [{ type: 'guide', text: '## Enroll a device' }],
+      },
+    ]
+    const { container } = render(
+      <ChatMessageList dialogId="d" messages={withGuide} isTyping />,
+    )
+    expect(names(container)).toEqual(['Michael Assraf', 'Mingo'])
+  })
+
+  it('renders a completed empty-ish assistant row when NOT typing', () => {
+    const { container } = render(<ChatMessageList dialogId="d" messages={pending} />)
+    expect(names(container)).toEqual(['Michael Assraf', 'Mingo'])
+  })
+})
+
+describe('the SYSTEM name-only row is a legitimate label-without-body', () => {
+  it('still renders', () => {
+    const messages: Message[] = [
+      { id: 'u1', role: 'user', name: 'Michael Assraf', content: 'hi' },
+      { id: 's1', role: 'user', name: 'Technician joined', content: '', authorType: 'system' },
+    ]
+    const { container } = render(<ChatMessageList dialogId="d" messages={messages} isTyping />)
+    expect(names(container)).toContain('Technician joined')
+  })
+})

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

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { forwardRef, memo, useMemo, useRef } from "react"
+import React, { forwardRef, memo, useEffect, useMemo, useRef } from "react"
 import { cn } from "../../utils/cn"
 import { isToday } from "../../utils/date-utils"
 import { formatDate, formatTime } from "../../utils/format-date"
@@ -12,7 +12,7 @@ import { ErrorMessageDisplay } from "./error-message-display"
 import { ContextCompactionDisplay } from "./context-compaction-display"
 import { ThinkingDisplay } from "./thinking-display"
 import { GuideDisplay } from "./guide-display"
-import { SimpleMarkdownRenderer } from "../ui/simple-markdown-renderer"
+import { SimpleMarkdownRenderer } from "../ui/markdown/simple-markdown-renderer"
 import type { ChatRef } from "./chat-ref.types"
 import { remarkCardLinks } from "./remark-card-links"
 import { remarkMentionChips } from "./remark-mention-chips"
@@ -164,9 +164,9 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
         | { kind: 'text'; text: string }
         | { kind: 'block'; key: string; node: React.ReactNode }
       const partsBySegment = new Map<number, SegmentPart[]>()
-      if (!render) return { inlineByKey, partsBySegment }
-      const cache = renderedCardNodeCache.current
       const usedKeys = new Set<string>()
+      if (!render) return { inlineByKey, partsBySegment, usedKeys }
+      const cache = renderedCardNodeCache.current
       // Card keys already emitted as a hoisted block (`b-<key>`). The same
       // marker can legitimately appear twice in one message (LLM references
       // the same entity twice); we hoist the FIRST occurrence and skip the
@@ -281,20 +281,99 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
           partsBySegment.set(segIdx, parts)
         }
       })
-      // Drop cached nodes for markers no longer present so the cache can't
-      // grow unbounded as a long message's markers change.
-      if (cache.size > usedKeys.size) {
-        for (const k of cache.keys()) {
-          if (!usedKeys.has(k)) cache.delete(k)
-        }
-      }
-      return { inlineByKey, partsBySegment }
+      return { inlineByKey, partsBySegment, usedKeys }
     }, [hasMarkerSupport, chatRefs, renderEntityCard, segments])
 
+    // Drop cached nodes for markers no longer present so the cache can't grow
+    // unbounded as a long message's markers change. Deliberately an EFFECT,
+    // not part of the memo above: pruning is a mutation, and doing it in the
+    // render phase is non-idempotent (StrictMode's double-invoke, or a render
+    // React throws away, would evict nodes the committed tree still uses and
+    // remount the cards it was built to preserve).
+    useEffect(() => {
+      const cache = renderedCardNodeCache.current
+      const usedKeys = renderingPlan?.usedKeys
+      if (!usedKeys) return
+      if (cache.size <= usedKeys.size) return
+      for (const k of [...cache.keys()]) {
+        if (!usedKeys.has(k)) cache.delete(k)
+      }
+    }, [renderingPlan])
+
+    // The plan is read through a REF inside the `<a>` override, not captured
+    // in the override's closure. `renderingPlan` is rebuilt on every text
+    // delta (its `segments` dep is a fresh array per delta), so depending on
+    // it here would give `cardComponentOverrides` a new identity every token
+    // — which re-creates the markdown engine's `components` memo and defeats
+    // its per-block `StreamingBlockRenderer` memoization for the WHOLE
+    // message, on every token. The ref keeps the override identity stable
+    // while still reading the current plan at call time.
+    const renderingPlanRef = useRef(renderingPlan)
+    renderingPlanRef.current = renderingPlan
+    const chatRefsRef = useRef(chatRefs)
+    chatRefsRef.current = chatRefs
+
+    // Ref-SET token. The override reads `chatRefsRef` at CALL time, but the
+    // markdown engine memoizes completed blocks on the override map's
+    // identity — so on a COMPLETED (no longer streaming) message, a ref that
+    // resolves late would never be re-read: nothing else about the renderer's
+    // props changes, the engine's memo bails, and the pill stays stuck on its
+    // fallback (`refMatch.title`, or the raw cardId) forever. Streaming is
+    // covered because `card://` blocks are excluded from the block cache; the
+    // completed path has no other escape.
+    //
+    // The token fingerprints VALUES, not just the key set: a later refs frame
+    // REPLACES the whole map for a send index, and the enrichment case that
+    // matters most — a `title` going from the raw cardId to the resolved
+    // document title — keeps the key set IDENTICAL. A key-only token would be
+    // unchanged, the override map would keep its identity, the engine's
+    // completed-block memo would bail, and the pill would stay on its fallback
+    // forever. Every `ChatRef` field is included because the host's
+    // `renderEntityCard` receives the whole ref and may render any of them.
+    //
+    // Still STABLE per text delta (the refs map doesn't change while tokens
+    // stream), and the cost is one pass over a handful of refs per CHANGED
+    // `chatRefs` identity — the dep list is unchanged.
+    //
+    // Fields are joined by `JSON.stringify`, NOT by a separator character.
+    // `title`, `preview` and `url` are free-form HOST strings, so any
+    // delimiter we pick is one the data may also contain: joined with a plain
+    // space, `title: 'a b'` + empty `url` fingerprints identically to
+    // `title: 'a'` + `url: 'b'`, silently reintroducing the stale-pill memo
+    // bail this token exists to fix. (An earlier revision used a literal NUL
+    // byte as the separator: collision-free in practice, but it made the
+    // source file itself binary to grep and diff tooling.) `JSON.stringify`
+    // escapes every field, so no value can forge a boundary.
+    //
+    // Caveat worth stating: `JSON.stringify` on `metadata` is key-ORDER
+    // dependent: two structurally equal objects built in different insertion
+    // orders fingerprint differently. Acceptable here because every refs map
+    // arrives from ONE decoder with a fixed field order, and the failure mode
+    // is a redundant re-render, never a stale pill.
+    const refsKey = useMemo(
+      () =>
+        Object.entries(chatRefs ?? {})
+          .sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0))
+          .map(([k, v]) =>
+            JSON.stringify([
+              k,
+              v.type,
+              v.sourceRepo ?? null,
+              v.id,
+              v.title,
+              v.url ?? null,
+              v.targetPlatform ?? null,
+              v.date ?? null,
+              v.preview ?? null,
+              v.metadata ?? null,
+            ]),
+          )
+          .join('|'),
+      [chatRefs],
+    )
+
     const cardComponentOverrides = useMemo(() => {
       if (!hasMarkerSupport && !hasMentionSupport) return undefined
-      const refs = chatRefs ?? {}
-      const inlineByKey = renderingPlan?.inlineByKey
       return {
         // Override `<a>` to detect `card://` URLs emitted by `remarkCardLinks`.
         // The render result was pre-computed in `renderingPlan` so block-level
@@ -322,7 +401,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
               const cardType = stripped.slice(0, sepIdx)
               const cardId = stripped.slice(sepIdx + 1)
               const key = `${cardType}:${cardId}`
-              const inline = inlineByKey?.get(key)
+              const inline = renderingPlanRef.current?.inlineByKey.get(key)
               if (inline != null) return inline
               // Three fallback cases — keep them DISTINCT, never blur them
               // together. Mixing them up (which the old code did by reaching
@@ -346,7 +425,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
               //       title from an unrelated ref — that hides the bug and
               //       deceives the reader into thinking they're looking at
               //       a real card.
-              const refMatch: ChatRef | undefined = refs[key]
+              const refMatch: ChatRef | undefined = chatRefsRef.current?.[key]
               if (refMatch) {
                 return <span className="text-ods-text-primary">{refMatch.title}</span>
               }
@@ -388,7 +467,13 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
           )
         },
       }
-    }, [hasMarkerSupport, hasMentionSupport, renderMention, chatRefs, renderingPlan, NavLinkAnchor])
+      // DEPS ARE DELIBERATELY MINIMAL — every one of them is stable across a
+      // streaming turn (booleans + host-stable fn/component identities, both
+      // enforced by this file's `memo` comparator). The rendering plan and the
+      // refs MAP are read through refs above precisely so they do NOT appear
+      // here; `refsKey` is the one ref-derived dep, and it only moves when the
+      // ref set OR any ref VALUE does (see its definition).
+    }, [hasMarkerSupport, hasMentionSupport, renderMention, NavLinkAnchor, refsKey])
 
     /**
      * Body of a markdown-bearing segment (`text` / `guide`).
@@ -403,8 +488,13 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
      * 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.
+     *
+     * `isStreaming` opts the segment into the markdown engine's streaming path
+     * (atomic-block memoization + fence tail-completion + aria-live). Only the
+     * actively streaming segment gets it, and within a marker-split segment
+     * only the LAST text chunk — the earlier chunks are already final.
      */
-    const renderSegmentBody = (segIndex: number, text: string) => {
+    const renderSegmentBody = (segIndex: number, text: string, isStreaming: boolean) => {
       const parts = renderingPlan?.partsBySegment.get(segIndex)
       if (!parts || parts.length === 0) {
         return (
@@ -413,6 +503,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
             textSize="compact"
             additionalRemarkPlugins={cardRemarkPlugins}
             componentOverrides={cardComponentOverrides}
+            streaming={isStreaming}
           />
         )
       }
@@ -425,6 +516,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
               textSize="compact"
               additionalRemarkPlugins={cardRemarkPlugins}
               componentOverrides={cardComponentOverrides}
+              streaming={isStreaming && pIdx === parts.length - 1}
             />
           )
         }
@@ -539,6 +631,12 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
           {/* Message segments — hidden for system messages without content */}
           {(!isSystem || segments.length > 0) && <div className="flex flex-col gap-2">
             {segments.map((segment, index) => {
+                // The engine's streaming path (atomic-block memoization +
+                // fence tail-completion + aria-live) applies ONLY to the
+                // actively streaming segment: last segment of a message that
+                // is still typing. On completion `isTyping` flips false and
+                // the engine does one authoritative whole-document parse.
+                const segmentIsStreaming = index === segments.length - 1 && !!isTyping
                 if (segment.type === 'text') {
                   return (
                     <div
@@ -548,11 +646,15 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
                         isError ? "text-ods-error" : "text-ods-text-primary",
                       )}
                     >
-                      {renderSegmentBody(index, segment.text)}
+                      {renderSegmentBody(index, segment.text, segmentIsStreaming)}
                     </div>
                   )
                 } else if (segment.type === 'guide') {
-                  return <GuideDisplay key={index}>{renderSegmentBody(index, segment.text)}</GuideDisplay>
+                  return (
+                    <GuideDisplay key={index}>
+                      {renderSegmentBody(index, segment.text, segmentIsStreaming)}
+                    </GuideDisplay>
+                  )
                 } else if (segment.type === 'tool_execution') {
                   return (
                     <ToolExecutionDisplay