@flamingo-stack/openframe-frontend-core 0.0.518-1663.4312.1 → 0.0.519

package/src/components/chat/utils/__tests__/process-historical-messages-golden.test.ts

@@ -392,3 +392,77 @@ describe('processHistoricalMessages — GUIDE rows', () => {
     expect(processHistoricalMessages(empty).messages).toEqual([])
   })
 })
+
+// ─── ASK rows ──────────────────────────────────────────────────────────────
+//
+// Same contract as GUIDE above: history must replay a persisted `ASK` row into
+// the SAME shape the live `ASK` chunk produces — the intro sentence as answer
+// text, then the card — or a reloaded dialog loses the clarification the user
+// was about to answer.
+
+describe('processHistoricalMessages — ASK rows', () => {
+  const askRow = {
+    type: 'ASK',
+    text: 'Do you want the docs, or your own workspace?',
+    question: 'What do you want to work on?',
+    options: [
+      { label: 'Find documentation', description: 'How scripting works and how to set it up' },
+      { label: 'Your scripts', description: 'List, edit or run the scripts in your workspace' },
+    ],
+  }
+
+  it('replays an ASK row as intro text followed by the card', () => {
+    const dialog: HistoricalMessage[] = [
+      {
+        id: 'a1',
+        chatType: 'CLIENT_CHAT',
+        createdAt: '2026-07-19T09:00:05Z',
+        owner: { type: 'ASSISTANT' },
+        messageData: [askRow as any],
+      },
+    ]
+    expect(processHistoricalMessages(dialog).messages[0].content).toEqual([
+      { type: 'text', text: 'Do you want the docs, or your own workspace?' },
+      {
+        type: 'ask',
+        question: 'What do you want to work on?',
+        options: [
+          { label: 'Find documentation', description: 'How scripting works and how to set it up' },
+          { label: 'Your scripts', description: 'List, edit or run the scripts in your workspace' },
+        ],
+      },
+    ])
+  })
+
+  it('keeps consecutive ASK rows as SEPARATE segments (the card pages them)', () => {
+    const dialog: HistoricalMessage[] = [
+      {
+        id: 'a1',
+        chatType: 'CLIENT_CHAT',
+        createdAt: '2026-07-19T09:00:05Z',
+        owner: { type: 'ASSISTANT' },
+        messageData: [
+          { type: 'ASK', question: 'First?', options: [{ label: 'A' }] } as any,
+          { type: 'ASK', question: 'Second?', options: [{ label: 'B' }] } as any,
+        ],
+      },
+    ]
+    expect(processHistoricalMessages(dialog).messages[0].content).toEqual([
+      { type: 'ask', question: 'First?', options: [{ label: 'A', description: undefined }] },
+      { type: 'ask', question: 'Second?', options: [{ label: 'B', description: undefined }] },
+    ])
+  })
+
+  it('an ASK row with no answerable options decodes to nothing', () => {
+    const dialog: HistoricalMessage[] = [
+      {
+        id: 'a1',
+        chatType: 'CLIENT_CHAT',
+        createdAt: '2026-07-19T09:00:05Z',
+        owner: { type: 'ASSISTANT' },
+        messageData: [{ type: 'ASK', question: 'Which one?', options: [{ description: 'no label' }] } as any],
+      },
+    ]
+    expect(processHistoricalMessages(dialog).messages).toEqual([])
+  })
+})

package/src/components/chat/utils/message-segment-accumulator.ts

@@ -9,6 +9,7 @@
  */
 
 import type {
+  AskOptionData,
   MessageSegment,
   ToolExecutionSegment,
   ApprovalRequestSegment,
@@ -163,6 +164,17 @@ export class MessageSegmentAccumulator {
     return this.getSegments()
   }
 
+  /**
+   * Add a clarification (ask) card. Unlike the three delta streams an ask
+   * arrives whole in one chunk, so it is always a NEW segment — never merged
+   * into a trailing one. Consecutive cards stay separate segments; the renderer
+   * is what pages through a run of them.
+   */
+  addAsk(question: string, options: AskOptionData[]): MessageSegment[] {
+    this.segments.push({ type: 'ask', question, options })
+    return this.getSegments()
+  }
+
   /**
    * Add a tool execution segment.
    *
@@ -530,6 +542,9 @@ export class MessageSegmentAccumulator {
         case 'guide':
           if (segment.text) this.appendGuide(segment.text)
           break
+        case 'ask':
+          this.addAsk(segment.question, segment.options)
+          break
         case 'tool_execution':
           this.addToolExecution(segment)
           break

package/src/components/chat/utils/process-historical-messages.ts

@@ -38,6 +38,9 @@ import {
   type MessageOwner,
 } from '../types'
 import type { ChatStreamEvent } from '../../../chat-protocol/events'
+// One normalizer for ask rows, shared with the live decoder — history and the
+// stream must agree on which options are usable.
+import { normalizeAskOptions } from '../../../chat-protocol/nats-decoder'
 import { MessageSegmentAccumulator, createMessageSegmentAccumulator } from './message-segment-accumulator'
 import { getCommandText } from './tool-call-helpers'
 
@@ -117,6 +120,22 @@ export function decodeHistoricalMessageData(data: MessageData): ChatStreamEvent
       }
       return null
 
+    // Same completeness gate as the live decoder (`decodeNatsChunk`): a
+    // persisted row without a question or without options is not a card the
+    // user can answer, so it replays as nothing rather than as empty chrome.
+    case MESSAGE_TYPE.ASK: {
+      if (!('question' in data)) return null
+      const question = typeof data.question === 'string' ? data.question.trim() : ''
+      const options = normalizeAskOptions(data.options)
+      if (!question || options.length === 0) return null
+      return {
+        type: 'ask',
+        ...(data.text ? { text: data.text } : {}),
+        question,
+        options,
+      }
+    }
+
     case MESSAGE_TYPE.EXECUTING_TOOL:
       if ('integratedToolType' in data) {
         return {
@@ -252,6 +271,13 @@ function applyHistoryEvent(
       accumulator.appendGuide(event.text)
       break
 
+    // Mirror of the live path: the intro sentence replays as answer text in
+    // front of the card, so a reloaded thread reads exactly like the stream did.
+    case 'ask':
+      if (event.text) accumulator.appendText(event.text)
+      accumulator.addAsk(event.question, event.options)
+      break
+
     case 'tool-execution':
       accumulator.addToolExecution({ type: 'tool_execution', data: event.data })
       break

package/src/components/ui/button/button.tsx

@@ -55,6 +55,15 @@ const buttonVariants = cva(
         // metadata rather than CTAs — author-page social rows, share rows.
         // Pair with variant="transparent" for the ghost treatment.
         'icon-sm': 'p-[var(--spacing-system-xxs)] h-8 w-8 [&_svg]:h-4 [&_svg]:w-4',
+        // 20px inline glyph for affordances that sit INSIDE a line of text —
+        // an info hint beside a badge, a copy glyph after an id. `icon-sm`'s
+        // 32px target is correct for a metadata row but visually swamps a
+        // 10px badge or a 14px label, so hosts were reaching for className
+        // overrides to shrink it. Below the WCAG 2.5.8 target floor on purpose:
+        // this is only for glyphs whose information is ALSO available another
+        // way (tooltip content mirrored into an aria-describedby node), never
+        // for a sole means of performing an action.
+        'icon-inline': 'p-0 h-5 w-5 min-h-0 min-w-0 shrink-0 [&_svg]:h-3.5 [&_svg]:w-3.5',
         // Bare 56px media glyph (play / unmute over video). A size variant so
         // hosts stop re-implementing a <button> to escape the 20px svg cap.
         'icon-glyph': 'p-0 h-14 w-14 [&_svg]:h-14 [&_svg]:w-14',