@flamingo-stack/openframe-frontend-core 0.0.428 → 0.0.429-snapshot.20260715222543

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

@@ -6,8 +6,18 @@ interface ChatMessageSkeletonProps {
   className?: string
   showAvatar?: boolean
   isUser?: boolean
+  /** How many body lines to draw under the name row. Default 3 (paragraph-ish
+   *  reply). Pass 1 for surfaces whose real messages are single-line (e.g. the
+   *  short scripted hero-demo turns), so the skeleton isn't ~3x too tall. */
+  bodyLines?: number
 }
 
+// Body-line width palette: full-width lines then a short trailing line, so any
+// `bodyLines` count ends on a short line like a real wrapped message.
+const BODY_LINE_WIDTHS = ["w-full", "w-11/12", "w-4/5", "w-5/6"]
+const bodyLineWidth = (index: number, total: number) =>
+  index === total - 1 ? "w-3/5" : BODY_LINE_WIDTHS[index % BODY_LINE_WIDTHS.length]
+
 /**
  * One message-row skeleton. Mirrors `ChatMessageEnhanced`'s real layout:
  * full panel width, no card background, and an INLINE avatar in the name row
@@ -19,7 +29,9 @@ export function ChatMessageSkeleton({
   className,
   showAvatar = true,
   isUser = false,
+  bodyLines = 3,
 }: ChatMessageSkeletonProps) {
+  const lines = Math.max(1, bodyLines)
   return (
     <div className={cn("relative py-[var(--spacing-system-s)]", className)}>
       <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
@@ -37,9 +49,12 @@ export function ChatMessageSkeleton({
 
         {/* Body lines — percentage widths so they reflow on panel resize. */}
         <div className="flex flex-col gap-2 pt-[var(--spacing-system-xxs)]">
-          <div className="h-4 w-full rounded bg-ods-border animate-pulse" />
-          <div className="h-4 w-11/12 rounded bg-ods-border animate-pulse" />
-          <div className="h-4 w-3/5 rounded bg-ods-border animate-pulse" />
+          {Array.from({ length: lines }, (_, i) => (
+            <div
+              key={i}
+              className={cn("h-4 rounded bg-ods-border animate-pulse", bodyLineWidth(i, lines))}
+            />
+          ))}
         </div>
       </div>
     </div>
@@ -61,6 +76,17 @@ interface ChatMessageListSkeletonProps {
    *  host wrapper is expected to own the panel padding; this stays empty by
    *  default so the skeleton sits flush. */
   contentClassName?: string
+  /** Body lines per message row (forwarded to `ChatMessageSkeleton`). Default 3;
+   *  pass 1 for single-line message surfaces. */
+  bodyLines?: number
+  /**
+   * FILL mode: top-anchor the rows and CLIP overflow (instead of bottom-anchoring
+   * + inner scroll). Combined with a generous `messageCount`, the rows cover the
+   * container top-to-bottom at ANY height — no per-container measuring, no empty
+   * band at the top. Use for loading surfaces that should read as "the whole
+   * panel is loading" rather than "a short thread pinned to the bottom".
+   */
+  fill?: boolean
 }
 
 export function ChatMessageListSkeleton({
@@ -69,6 +95,8 @@ export function ChatMessageListSkeleton({
   showAvatars = true,
   fullWidth = false,
   contentClassName,
+  bodyLines,
+  fill = false,
 }: ChatMessageListSkeletonProps) {
   const messages = Array.from({ length: messageCount }, (_, index) => ({
     id: index,
@@ -79,9 +107,10 @@ export function ChatMessageListSkeleton({
     <div className="relative flex-1 min-h-0 flex flex-col">
       <div
         className={cn(
-          "flex h-full w-full flex-col overflow-y-auto overflow-x-hidden flex-1",
-          "[scroll-behavior:smooth]",
-          "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30",
+          "flex h-full w-full flex-col flex-1",
+          fill
+            ? "overflow-hidden"
+            : "overflow-y-auto overflow-x-hidden [scroll-behavior:smooth] scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30",
           className,
         )}
       >
@@ -92,15 +121,17 @@ export function ChatMessageListSkeleton({
               : "mx-auto flex w-full max-w-ods-content-narrow flex-col min-w-0",
             contentClassName,
           )}
-          style={{ minHeight: '100%' }}
+          style={fill ? undefined : { minHeight: '100%' }}
         >
-          {/* Bottom-anchor the rows like the real list. */}
-          <div className="flex-1" />
+          {/* Bottom-anchor the rows like the real list — unless FILL mode wants
+              them top-anchored + clipped to cover the whole panel. */}
+          {!fill && <div className="flex-1" />}
           {messages.map((message) => (
             <ChatMessageSkeleton
               key={message.id}
               showAvatar={showAvatars}
               isUser={message.isUser}
+              bodyLines={bodyLines}
             />
           ))}
         </div>

package/src/components/chat/chat-panel-header.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import * as React from 'react'
+import { cn } from '../../utils/cn'
 import { Chevron01LeftIcon } from '../icons-v2-generated/arrows/chevron-01-left-icon'
 import {
   Ellipsis01Icon,
@@ -42,6 +43,11 @@ export interface ChatPanelHeaderProps {
   onArchive?: () => void
   /** Open the Chat Archive page — renders the clock button (list view only). */
   onOpenArchive?: () => void
+  /** Force the COMPACT (`h-14` desktop-style) bar at every width, skipping the
+   *  full-screen mobile header. For EMBEDDED surfaces (e.g. a small preview
+   *  panel) where the phone-sized full-bleed header (large `text-h2` title) is
+   *  wrong regardless of viewport. Default false = viewport-responsive. */
+  compact?: boolean
 }
 
 /**
@@ -61,6 +67,7 @@ export function ChatPanelHeader({
   onRename,
   onArchive,
   onOpenArchive,
+  compact = false,
 }: ChatPanelHeaderProps) {
   // Desktop ⋯ menu (active, non-archived conversation only) — rename / archive.
   const menuItems = [
@@ -70,23 +77,28 @@ export function ChatPanelHeader({
 
   return (
     <>
-      {/* Mobile (<md): a distinct layout (Figma node 7363:85532). */}
-      <ChatPanelHeaderMobile
-        className="flex md:hidden"
-        showBack={showBack}
-        title={title}
-        backAriaLabel={backAriaLabel}
-        isArchivedView={isArchivedView}
-        onBack={onBack}
-        onClose={onClose}
-        onRestore={onRestore}
-        onRename={onRename}
-        onArchive={onArchive}
-        onOpenArchive={onOpenArchive}
-      />
+      {/* Mobile (<md): a distinct full-screen layout (Figma node 7363:85532).
+          Skipped in `compact` mode — an embedded preview keeps the small bar
+          at every width. */}
+      {!compact && (
+        <ChatPanelHeaderMobile
+          className="flex md:hidden"
+          showBack={showBack}
+          title={title}
+          backAriaLabel={backAriaLabel}
+          isArchivedView={isArchivedView}
+          onBack={onBack}
+          onClose={onClose}
+          onRestore={onRestore}
+          onRename={onRename}
+          onArchive={onArchive}
+          onOpenArchive={onOpenArchive}
+        />
+      )}
 
-      {/* Desktop (md+): fixed-height bar with full-height divider action cells. */}
-      <div className="hidden md:flex flex-shrink-0 h-14 w-full overflow-hidden border-b border-ods-border bg-ods-card">
+      {/* Compact bar: `md+` normally, or ALL widths when `compact`. Fixed-height
+          bar with full-height divider action cells. */}
+      <div className={cn('flex-shrink-0 h-14 w-full overflow-hidden border-b border-ods-border bg-ods-card', compact ? 'flex' : 'hidden md:flex')}>
         <div className="flex flex-1 min-w-0 items-center gap-2 px-4 py-3">
           {showBack ? (
             <>

package/src/components/chat/chat-quick-action-row.tsx

@@ -9,8 +9,10 @@ import { Ellipsis01Icon } from '../icons-v2-generated'
 import { useAutoLimitTags } from '../../hooks/ui/use-auto-limit-tags'
 import {
   QuickActionChipButton,
+  QuickActionChipSkeleton,
   renderQuickActionIcon,
   type QuickActionIconSpec,
+  type QuickActionAccent,
 } from './quick-action-chip'
 
 // =============================================================================
@@ -27,6 +29,11 @@ export interface QuickActionChip {
   icon?: React.ReactNode | QuickActionIconSpec
   /** `'primary'` = accent (yellow) chip, `'outline'` = bordered chip (default). */
   variant?: 'primary' | 'outline'
+  /** Active single-select state — renders the accented `selected` skin
+   *  (overrides `variant`). */
+  selected?: boolean
+  /** Accent for the `selected` skin (`'cyan'` = cyan twin, else pink). */
+  selectedAccent?: QuickActionAccent
   onSelect?: () => void
   /** Pointer/keyboard focus enters the chip — e.g. preview the full prompt in
    *  the composer. */
@@ -47,9 +54,18 @@ export interface ChatQuickActionRowProps {
    *  for roomy contexts (e.g. the Guide empty state) where overflow-hiding chips
    *  would defeat per-chip hover/preview. */
   wrap?: boolean
+  /** Render `skeletonCount` loading chips (the real {@link QuickActionChipSkeleton},
+   *  so geometry is 1:1 with the loaded chips) instead of `chips`. Wrap-aware. */
+  loading?: boolean
+  /** How many skeleton chips to draw when `loading`. Default 8. */
+  skeletonCount?: number
   className?: string
 }
 
+// Deterministic label widths (in `ch`) so a loading wall reads like a populated
+// one — a varied spread, not a uniform block.
+const SKELETON_LABEL_CHS = [16, 9, 13, 7, 18, 8, 20, 11, 15, 10, 19, 12, 17, 8, 21, 14]
+
 // =============================================================================
 // Chip button
 // =============================================================================
@@ -62,6 +78,8 @@ function ChipButton({ chip }: { chip: QuickActionChip }) {
       label={chip.label}
       icon={chip.icon}
       variant={chip.variant ?? 'outline'}
+      selected={chip.selected}
+      selectedAccent={chip.selectedAccent}
       onSelect={chip.onSelect}
       onHoverStart={chip.onHoverStart}
       onHoverEnd={chip.onHoverEnd}
@@ -86,6 +104,8 @@ export function ChatQuickActionRow({
   leading,
   chips,
   wrap = false,
+  loading = false,
+  skeletonCount = 8,
   className,
 }: ChatQuickActionRowProps) {
   const auto = useAutoLimitTags({
@@ -96,6 +116,19 @@ export function ChatQuickActionRow({
   const visibleChips = chips.slice(0, auto.visibleCount)
   const hiddenChips = chips.slice(auto.visibleCount)
 
+  // Loading: draw skeleton chips (real `QuickActionChipSkeleton`, 1:1 geometry)
+  // in the same wrap/inline layout — one shared skeleton for every consumer, no
+  // hand-rolled bars.
+  if (loading) {
+    return (
+      <div className={cn('flex shrink-0 items-center gap-1', wrap && 'flex-wrap', className)}>
+        {Array.from({ length: skeletonCount }, (_, i) => (
+          <QuickActionChipSkeleton key={i} labelCh={SKELETON_LABEL_CHS[i % SKELETON_LABEL_CHS.length]} />
+        ))}
+      </div>
+    )
+  }
+
   if (!leading && chips.length === 0) return null
 
   // Wrap mode: no width-measurement / "⋯" overflow — every chip renders inline

package/src/components/chat/embeddable-chat.tsx

@@ -1557,7 +1557,13 @@ function EmbeddableChatInner({
   // history has loaded (`hasMessages`). Driving the surface + content branch
   // off this makes the normal-chat open animate identically to the archived
   // one instead of lagging behind the message fetch.
-  const hasConversation = hasMessages || isOpeningDialog || isViewingArchived
+  // In `previewMode`, the host drives the whole state (`mingoStateOverride`) and
+  // there is no dialog manager to set `isOpeningDialog`. So an embedded preview
+  // that wants a message-list skeleton (real header + composer, skeleton bubbles)
+  // signals it via `isMessagesLoading` — treat that as an open conversation so
+  // the content branch shows the skeleton instead of the new-user welcome.
+  const hasConversation =
+    hasMessages || isOpeningDialog || isViewingArchived || (previewMode && isMessagesLoading)
   // Opening a dialog whose history hasn't arrived yet — show a message-list
   // skeleton instead of an empty thread so the open reads as "loading" rather
   // than a blank flash before the bubbles stream in.
@@ -1680,6 +1686,10 @@ function EmbeddableChatInner({
                 className="flex flex-1 min-h-0 flex-col animate-in fade-in-0 duration-200"
               >
               <ChatPanelHeader
+                // Embedded previews (the hero demo tabs) keep the small bar at
+                // every width — the phone-sized full-screen header (large title)
+                // is wrong in a small embedded panel.
+                compact={previewMode}
                 // Guide-mode empty state shows a back-chevron + "Mingo Guide"
                 // (back returns to the default Mingo welcome); an open
                 // conversation shows back + the dialog title; the Mingo list

package/src/components/chat/hooks/index.ts

@@ -2,6 +2,7 @@
 
 export * from './use-chunk-catchup'
 export * from './use-collapsible'
+export * from './use-scripted-stream'
 export * from './use-jetstream-dialog-subscription'
 export * from './use-nats-dialog-subscription'
 export * from './use-realtime-chunk-processor'

package/src/components/chat/hooks/use-nats-chat-adapter.ts

@@ -74,6 +74,7 @@ import type {
   ChunkData,
   FetchChunksFunction,
   HistoricalMessage,
+  MessageProcessingOptions,
   MessageSegment,
   NatsMessageType,
   StreamingPhase,
@@ -374,8 +375,14 @@ function updateTrailingAssistant(
  * here because the unified contract surfaces errors as banners, not
  * inline messages. (Hosts that need inline error bubbles can extend
  * the contract later.)
+ *
+ * Exported for host reuse (e.g. scripted marketing demos that rehydrate a
+ * stored `HistoricalMessage[]` via `processHistoricalMessagesWithErrors` and
+ * feed a `previewMode` EmbeddableChat). This mapper carries the segment/content
+ * shape only; author identity (name/avatar/authorType/timestamp) that a host
+ * needs for the demo is re-attached by the host from the same processed rows.
  */
-function mapProcessedToUnified(
+export function mapProcessedToUnified(
   processed: Array<{
     id: string
     role: 'user' | 'assistant' | 'error'
@@ -404,6 +411,28 @@ function mapProcessedToUnified(
   return out
 }
 
+/**
+ * ONE-CALL `HistoricalMessage[]` -> `UnifiedChatMessage[]` for hosts replaying a
+ * stored conversation outside the live adapter (scripted marketing demos, a
+ * `previewMode` EmbeddableChat). Does the full pipeline the adapter does inline:
+ * `processHistoricalMessagesWithErrors` -> `mapProcessedToUnified` -> re-attach
+ * the author identity (name / avatar / authorType / timestamp) the segment
+ * mapper drops. Hosts no longer hand-roll the two-step + re-attach.
+ */
+export function historicalToUnified(
+  messages: HistoricalMessage[],
+  options: MessageProcessingOptions = {},
+): UnifiedChatMessage[] {
+  const { messages: processed } = processHistoricalMessagesWithErrors(messages, options)
+  const byId = new Map(processed.map((p) => [p.id, p]))
+  return mapProcessedToUnified(processed).map((u) => {
+    const p = byId.get(u.id)
+    return p
+      ? { ...u, name: p.name, avatar: p.avatar ?? null, authorType: p.authorType, timestamp: p.timestamp }
+      : u
+  })
+}
+
 // =============================================================================
 // Hook
 // =============================================================================

package/src/components/chat/hooks/use-scripted-stream.ts

@@ -0,0 +1,69 @@
+'use client'
+
+/**
+ * Playback clock for {@link buildStreamFrames}: advance through pre-built
+ * scripted frames like a live chat stream — each frame holds for its own
+ * `delayMs`, then the next reveals, parking on the last. Surface-agnostic: the
+ * caller maps `frame.messages` to its own chat shape and reads `frame.phase` /
+ * `frame.typing`.
+ *
+ * `resetKey` restarts playback from the top when a NEW conversation is selected
+ * (identity change) — NOT when the SAME conversation grows (e.g. an Approve
+ * appends its continuation), which must resume from where it paused. Because the
+ * frame list's shared prefix is deterministic, keeping the index across a grow
+ * resumes seamlessly into the appended frames.
+ *
+ * `prefers-reduced-motion` (or `enabled === false`) jumps straight to the final
+ * frame (everything revealed, idle).
+ */
+
+import { useEffect, useState } from 'react'
+import type { StreamFrame } from '../utils/scripted-stream'
+
+const EMPTY_FRAME: StreamFrame = { messages: [], phase: 'idle', typing: false, delayMs: 0 }
+
+function prefersReducedMotion(): boolean {
+  return typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true
+}
+
+export function useScriptedStream(frames: StreamFrame[], resetKey: unknown, enabled = true): StreamFrame {
+  const [index, setIndex] = useState(0)
+  const [reducedMotion, setReducedMotion] = useState(false)
+
+  // Restart from the top on a new conversation, synchronously during render
+  // (React's "adjust state on prop change" pattern) so the previous stream's
+  // last frame never flashes before the reset effect runs.
+  const [prevKey, setPrevKey] = useState(resetKey)
+  if (resetKey !== prevKey) {
+    setPrevKey(resetKey)
+    setIndex(0)
+  }
+
+  useEffect(() => {
+    setReducedMotion(prefersReducedMotion())
+    const mq = window.matchMedia?.('(prefers-reduced-motion: reduce)')
+    if (!mq) return
+    const onChange = () => setReducedMotion(mq.matches)
+    mq.addEventListener('change', onChange)
+    return () => mq.removeEventListener('change', onChange)
+  }, [])
+
+  const playing = enabled && !reducedMotion && frames.length > 0
+  const lastIndex = Math.max(0, frames.length - 1)
+
+  // Advance one frame after the current frame's hold. When `frames` grows (an
+  // Approve appends more), this effect re-runs and, if we were parked on the old
+  // last frame, schedules the next — resuming the stream. `frames[index]` is
+  // clamped because a shrink (a shorter new conversation before the reset lands)
+  // could momentarily leave `index` past the end.
+  useEffect(() => {
+    if (!playing || index >= lastIndex) return
+    const current = frames[Math.min(index, lastIndex)] ?? EMPTY_FRAME
+    const t = setTimeout(() => setIndex((i) => Math.min(i + 1, lastIndex)), current.delayMs)
+    return () => clearTimeout(t)
+  }, [index, frames, playing, lastIndex])
+
+  if (frames.length === 0) return EMPTY_FRAME
+  if (!playing) return frames[lastIndex]
+  return frames[Math.min(index, lastIndex)] ?? EMPTY_FRAME
+}

package/src/components/chat/quick-action-chip.tsx

@@ -145,6 +145,10 @@ export interface QuickActionChipButtonProps {
    *  Tag's `selected` variant (pink border + pink-secondary fill), overriding
    *  `variant`. Used by chip groups acting as tabs (OpenFrame categories). */
   selected?: boolean
+  /** Accent for the `selected` skin: `'cyan'` uses the cyan twin, anything else
+   *  (default) uses pink. Lets an agent's chip group match its own theme accent
+   *  (fae pink / mingo cyan) instead of the fixed pink. */
+  selectedAccent?: QuickActionAccent
   /** Chip scale, forwarded to `Tag` — `'large'` is the Figma "Feature Item"
    *  48px chip (h3 bold label, 24px icon box). Default `'default'` (32px). */
   size?: 'default' | 'large'
@@ -226,6 +230,7 @@ export function QuickActionChipButton({
   lozenge,
   variant = 'outline',
   selected = false,
+  selectedAccent,
   size = 'default',
   onSelect,
   onHoverStart,
@@ -235,7 +240,7 @@ export function QuickActionChipButton({
 }: QuickActionChipButtonProps) {
   const resolvedIcon = renderQuickActionIcon(icon)
   const resolvedLabel = composeChipLabel(label, lozenge)
-  const tagVariant = selected ? 'selected' : variant
+  const tagVariant = selected ? (selectedAccent === 'cyan' ? 'selectedCyan' : 'selected') : variant
   if (!interactive) {
     return <Tag variant={tagVariant} size={size} icon={resolvedIcon} label={resolvedLabel} className={className} />
   }

package/src/components/chat/utils/index.ts

@@ -198,3 +198,5 @@ export {
   resolveSourceRowCTA,
   resolveSourceIcon,
 } from './source-row-cta'
+
+export * from './scripted-stream'

package/src/components/chat/utils/scripted-stream.ts

@@ -0,0 +1,111 @@
+/**
+ * Scripted-conversation replay — turn a stored `HistoricalMessage[]` into ordered
+ * "mock SSE" playback frames that animate a chat surface exactly like the live
+ * NATS/SSE stream (a `thinking` pause → assistant text token-by-token → tool /
+ * approval segments popping in → `idle`), just replayed from a script instead of
+ * a network stream.
+ *
+ * Lives in the lib (not a host) so any consumer — marketing hero demos, docs,
+ * onboarding tours — can drive a `previewMode` `EmbeddableChat` or a
+ * `ChatMessageList` from a canned conversation without re-implementing the
+ * streaming cadence. Pair with {@link useScriptedStream} (the playback clock).
+ */
+
+import type { HistoricalMessage, MessageData, StreamingPhase } from '../types'
+
+/** Normalize the single-or-array `messageData` to an array (empty when absent). */
+export function normalizeHistoricalMessageData(md: HistoricalMessage['messageData']): MessageData[] {
+  return Array.isArray(md) ? md : md ? [md] : []
+}
+
+/** A message the user authored carries an `owner`; assistant turns have none —
+ *  drives whether a turn streams (assistant) or lands at once (user). */
+export function isHistoricalUserTurn(m: HistoricalMessage): boolean {
+  return !!m.owner
+}
+
+const isTextSegment = (d: MessageData): d is MessageData & { type: 'TEXT'; text: string } =>
+  (d as { type?: string })?.type === 'TEXT' && typeof (d as { text?: unknown }).text === 'string'
+
+/** One rendered step of the mocked stream. */
+export interface StreamFrame {
+  /** The partial message list to show at this step. */
+  messages: HistoricalMessage[]
+  phase: StreamingPhase
+  /** The chat "typing" indicator (up during the `thinking` pause). */
+  typing: boolean
+  /** Hold time (ms) before advancing to the next frame. */
+  delayMs: number
+}
+
+// Playback cadence. Assistant turns "think" then stream token-by-token; user
+// turns land at once. Tuned to read like a real chat without dragging.
+const THINK_MS = 550
+const TOKEN_MS = 55 // per word revealed while streaming text
+const USER_MS = 480 // dwell on a user turn before the reply starts thinking
+const SEGMENT_MS = 340 // a tool / approval card pops in
+const POST_MS = 240 // dwell after a completed assistant turn
+
+/** Split text into tokens that KEEP surrounding whitespace, so re-joining a
+ *  prefix reproduces the original spacing exactly (`"a b"` → `["a ", "b"]`). */
+function tokenize(text: string): string[] {
+  return text.match(/\s*\S+\s*/g) ?? (text ? [text] : [])
+}
+
+/**
+ * Expand a message list into ordered playback frames reproducing the live
+ * stream: each user turn lands whole; each assistant turn first shows a
+ * `thinking` indicator, then streams its text token-by-token, then pops any
+ * tool / approval segments. Frame COUNT for a given prefix is deterministic, so
+ * a host that appends a continuation (e.g. after an Approve) resumes seamlessly
+ * from where it paused — the shared prefix's frames are unchanged.
+ */
+export function buildStreamFrames(messages: HistoricalMessage[]): StreamFrame[] {
+  const frames: StreamFrame[] = []
+  const revealed: HistoricalMessage[] = []
+  const push = (msgs: HistoricalMessage[], phase: StreamingPhase, typing: boolean, delayMs: number) =>
+    frames.push({ messages: msgs.slice(), phase, typing, delayMs })
+
+  messages.forEach((msg) => {
+    if (isHistoricalUserTurn(msg)) {
+      revealed.push(msg)
+      push(revealed, 'idle', false, USER_MS)
+      return
+    }
+
+    // Assistant turn: a `thinking` pause, then stream this turn's segments in
+    // order. The pause is emitted ONLY when there is already content to show
+    // (`revealed.length > 0`) — an empty first frame would hand the surface a
+    // zero-message list, flashing its empty state before the opening line.
+    if (revealed.length > 0) push(revealed, 'thinking', true, THINK_MS)
+
+    const segs = normalizeHistoricalMessageData(msg.messageData)
+    const built: MessageData[] = []
+    const emit = () => push([...revealed, { ...msg, messageData: [...built] }], 'streaming', false, 0)
+
+    segs.forEach((seg) => {
+      if (isTextSegment(seg)) {
+        const tokens = tokenize(seg.text)
+        let acc = ''
+        built.push({ ...seg, text: '' })
+        tokens.forEach((tok) => {
+          acc += tok
+          built[built.length - 1] = { ...seg, text: acc }
+          push([...revealed, { ...msg, messageData: [...built] }], 'streaming', false, TOKEN_MS)
+        })
+        built[built.length - 1] = { ...seg }
+      } else {
+        // Tool / approval segment: pops in fully.
+        built.push(seg)
+        emit()
+        frames[frames.length - 1].delayMs = SEGMENT_MS
+      }
+    })
+
+    revealed.push(msg)
+    push(revealed, 'idle', false, POST_MS)
+  })
+
+  if (frames.length === 0) push(revealed, 'idle', false, 0)
+  return frames
+}

package/src/components/features/board/index.ts

@@ -6,8 +6,8 @@ export { BoardColumn } from './board-column'
 export type { BoardColumnProps } from './board-column'
 export { BoardColumnHeader } from './board-column-header'
 export type { BoardColumnHeaderProps } from './board-column-header'
-export { TicketCard } from './ticket-card'
-export type { TicketCardProps } from './ticket-card'
+export { TicketCard, TicketCardView, TicketCardBody } from './ticket-card'
+export type { TicketCardProps, TicketCardViewProps, TicketCardBodyProps } from './ticket-card'
 export { BoardTicketApproval } from './board-ticket-approval'
 export type { BoardTicketApprovalProps } from './board-ticket-approval'
 export { TicketCardSkeleton } from './ticket-card-skeleton'