@flamingo-stack/openframe-frontend-core 0.0.222 → 0.0.223-snapshot.20260604201541

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

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { forwardRef, memo, useMemo } from "react"
+import React, { forwardRef, memo, useMemo, useRef } from "react"
 import { cn } from "../../utils/cn"
 import { SquareAvatar } from "../ui/square-avatar"
 import { ToolExecutionDisplay } from "./tool-execution-display"
@@ -57,6 +57,19 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
 
     const segments = useMemo(() => normalizeContent(content), [content])
 
+    // Cross-render cache of rendered inline-card nodes, keyed by `type:id`.
+    // A fetch-mode card lives inside the assistant message, which re-renders on
+    // every stream chunk (and the whole list re-renders when a new message
+    // arrives). `renderEntityCard` produces a FRESH element each time, so React
+    // re-mounts the card — closing any open menu/popover and re-triggering its
+    // fetch. Caching the produced node by key and returning the SAME element
+    // reference lets React bail out of re-rendering that subtree, so the card
+    // (and its open menu) survives across chunks. Invalidated per key when the
+    // backing ref or the render fn identity changes.
+    const renderedCardNodeCache = useRef(
+      new Map<string, { refMatch: ChatRef | undefined; render: ((ref: ChatRef) => React.ReactNode) | undefined; node: React.ReactNode }>(),
+    )
+
     /**
      * Per-message rendering plan for `[card://type:id]` markers.
      *
@@ -94,7 +107,13 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
         | { 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>()
+      const cache = renderedCardNodeCache.current
+      const usedKeys = new Set<string>()
+      // 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
+      // duplicates so two siblings never collide on the same React key.
+      const emittedBlockKeys = new Set<string>()
       segments.forEach((segment, segIdx) => {
         if (segment.type !== 'text') return
         const text = segment.text
@@ -106,11 +125,15 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
           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)) {
+          usedKeys.add(key)
+          // Reuse the cached node when neither the backing ref nor the render
+          // fn changed — returning the SAME element reference across renders is
+          // what stops React from re-mounting the card (and closing its open
+          // menu / re-fetching) on every stream chunk. Also dedups the same key
+          // emitted twice within one message.
+          const refMatch = refs[key]
+          let entry = cache.get(key)
+          if (!entry || entry.refMatch !== refMatch || entry.render !== render) {
             // Always invoke render() — even when the metadata map has
             // no entry for this marker. Fetch-mode card types
             // (delivery_item, roadmap_item, internal_task, etc.) don't
@@ -129,25 +152,30 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
             // `ref.title` shows the id rather than `undefined`) and
             // `url` to null (matches the no-link semantics fetch-mode
             // cards rely on — they resolve their own URL after fetch).
-            const refMatch = refs[key]
             const refForRender: ChatRef = refMatch ?? {
               type: cardType,
               id: cardId,
               title: cardId,
               url: null,
             }
-            rendered = render(refForRender)
-            seenRendered.set(key, rendered)
+            entry = { refMatch, render, node: render(refForRender) }
+            cache.set(key, entry)
           }
+          const rendered = entry.node
           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 })
+            // Hoist the block payload only on the FIRST occurrence of this key
+            // — a repeated marker still gets its inline pill (text + override
+            // above) but must not push a second `b-<key>` sibling.
+            if (!emittedBlockKeys.has(key)) {
+              emittedBlockKeys.add(key)
+              parts.push({ kind: 'block', key, node: props.children })
+            }
             cursor = markerEnd
-            const refMatch = refs[key]
             inlineByKey.set(
               key,
               props.inline != null
@@ -155,8 +183,26 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
                 : <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)
+            // Hoist fetch-mode entity cards (roadmap/blog/case-study/release/…)
+            // OUT of the markdown as stable-keyed block siblings — exactly like
+            // BlockCard. Rendered INSIDE `<SimpleMarkdownRenderer>` they remount
+            // on every streaming re-parse (react-markdown rebuilds its subtree
+            // token-by-token), which closes any open menu/popover and re-fires
+            // the card's fetch. As a sibling keyed by the card key (`b-<key>`)
+            // the card survives streaming: appending more text/markers only adds
+            // NEW siblings, existing cards keep their React instance.
+            //
+            // We EXCLUDE the marker from the surrounding text (cursor jumps past
+            // it) so no inline pill renders — the full card IS the content.
+            // Hoist only the FIRST occurrence; a duplicate marker is dropped
+            // entirely (no inline pill for hoisted cards) so we never push a
+            // second sibling colliding on the same `b-<key>` React key.
+            parts.push({ kind: 'text', text: text.slice(cursor, match.index) })
+            if (!emittedBlockKeys.has(key)) {
+              emittedBlockKeys.add(key)
+              parts.push({ kind: 'block', key, node: rendered })
+            }
+            cursor = match.index + match[0].length
           }
         }
         // Trailing text after the last block marker (or the entire
@@ -172,6 +218,13 @@ 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 }
     }, [hasMarkerSupport, chatRefs, renderEntityCard, segments])
 
@@ -263,18 +316,29 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
 
     const getAvatarProps = () => {
       const displayName = name || (isUser ? "User" : assistantType === 'mingo' ? "Mingo" : "Fae")
-      const initials = displayName.split(' ').map(n => n[0]).join('').toUpperCase()
       const isMingo = assistantType === 'mingo'
-      
+
       return {
         src: avatar || undefined,
         alt: `${displayName} avatar`,
-        fallback: initials,
+        // Pass the FULL name — SquareAvatar derives first+last initials itself
+        // (passing pre-joined initials like "PS" would collapse to one letter,
+        // since getFirstLastInitials treats it as a single word).
+        fallback: displayName,
         size: "sm" as const,
         variant: "round" as const,
+        // User avatar: compact 20×20 with 2px padding and a subtle gray fill
+        // (`bg-ods-card`) so the `border-ods-border` ring stays visible — the
+        // brand fill reads poorly for a user. Assistant/Fae keep their brand
+        // fill. Initials are smaller + muted gray for the user placeholder.
+        ...(isUser ? { initialsClassName: "text-[9px] text-ods-text-secondary" } : {}),
         className: cn(
           "flex-shrink-0",
-          isMingo ? "bg-ods-flamingo-cyan" : "bg-ods-flamingo-pink"
+          isUser
+            ? "h-5 w-5 p-0.5 bg-ods-card"
+            : isMingo
+              ? "bg-ods-flamingo-cyan"
+              : "bg-ods-flamingo-pink"
         )
       }
     }
@@ -315,9 +379,15 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
               should be sized at ~50-60% of the wrapper (h-4 w-4 =
               16px works well for a 32px circle). */}
           <div className="flex items-center gap-[var(--spacing-system-xs)]">
-            {showAvatar && !isSystem && !isUser && (
-              assistantIcon && !avatar ? (
-                <div className="flex items-center justify-center h-8 w-8 rounded-full bg-ods-accent flex-shrink-0">
+            {/* All non-system rows render an avatar. User bubbles always show
+                the SquareAvatar (image, or an initials fallback on missing/
+                failed image). Assistant/Fae use the host brand icon when no
+                avatar is supplied, else the filled SquareAvatar. */}
+            {showAvatar && !isSystem && (
+              !isUser && assistantIcon && !avatar ? (
+                // Host-supplied brand icon (e.g. Mingo): render it directly,
+                // no filled pill — the icon carries its own brand accent.
+                <div className="flex items-center justify-center flex-shrink-0">
                   {assistantIcon}
                 </div>
               ) : (

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

@@ -411,7 +411,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
         <ChatMessageListSkeleton
           className={className}
           showAvatars={showAvatars}
-          assistantType={assistantType}
+          fullWidth={fullWidth}
           contentClassName={contentClassName}
           messageCount={6}
         />

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

@@ -6,54 +6,40 @@ interface ChatMessageSkeletonProps {
   className?: string
   showAvatar?: boolean
   isUser?: boolean
-  assistantType?: 'mingo' | 'fae'
 }
 
-export function ChatMessageSkeleton({ 
-  className, 
-  showAvatar = true, 
-  isUser = false, 
-  assistantType = 'fae' 
+/**
+ * One message-row skeleton. Mirrors `ChatMessageEnhanced`'s real layout:
+ * full panel width, no card background, and an INLINE avatar in the name row
+ * (the 2025 chat pattern — Claude.ai / ChatGPT / Gemini), NOT the legacy
+ * `absolute -left-16` hanging avatar. Body lines use percentage widths so they
+ * reflow cleanly as the panel resizes.
+ */
+export function ChatMessageSkeleton({
+  className,
+  showAvatar = true,
+  isUser = false,
 }: ChatMessageSkeletonProps) {
-  const isMingo = assistantType === 'mingo'
-
   return (
-    <div
-      className={cn(
-        "relative",
-        !isUser && "bg-ods-card/50 rounded-lg px-4 -mx-4",
-        className
-      )}
-    >
-      {/* Avatar Skeleton - absolutely positioned outside content area to match
-          the real ChatMessageEnhanced hanging-avatar layout. */}
-      {showAvatar && !isUser && (
-        <div className={cn(
-          "absolute -left-16 top-[var(--spacing-system-s)] w-12 h-12 rounded-full animate-pulse",
-          isMingo
-            ? "bg-gradient-to-br from-cyan-400/30 to-cyan-600/30"
-            : "bg-gradient-to-br from-pink-400/30 to-pink-600/30"
-        )} />
-      )}
-
-      {/* Message Content Skeleton */}
-      <div className="flex flex-col gap-1 min-w-0">
-        {/* Name and Timestamp Row Skeleton */}
-        <div className="flex items-center justify-between pr-2">
-          <div className="h-5 w-16 bg-ods-border rounded animate-pulse" />
-          <div className="h-4 w-12 bg-ods-border rounded animate-pulse" />
+    <div className={cn("relative py-[var(--spacing-system-s)]", className)}>
+      <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
+        {/* Name row — inline avatar (assistant only) + name + timestamp,
+            matching ChatMessageEnhanced's inline-avatar header. Neutral
+            `bg-ods-border` so the placeholders are actually visible (a tinted
+            low-alpha fill reads as blank on the dark surface). */}
+        <div className="flex items-center gap-[var(--spacing-system-xs)]">
+          {showAvatar && !isUser && (
+            <div className="h-8 w-8 flex-shrink-0 rounded-full bg-ods-border animate-pulse" />
+          )}
+          <div className="h-5 w-32 rounded bg-ods-border animate-pulse" />
+          <div className="ml-auto h-4 w-14 rounded bg-ods-border animate-pulse" />
         </div>
-        
-        {/* Message Content Skeleton */}
-        <div className="flex flex-col gap-2">
-          <div className="space-y-2">
-            {/* First line - full width */}
-            <div className="h-4 w-full bg-ods-border rounded animate-pulse" />
-            {/* Second line - 80% width */}
-            <div className="h-4 w-4/5 bg-ods-border rounded animate-pulse" />
-            {/* Third line - 60% width (optional for variation) */}
-            <div className="h-4 w-3/5 bg-ods-border rounded animate-pulse" />
-          </div>
+
+        {/* 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" />
         </div>
       </div>
     </div>
@@ -64,7 +50,16 @@ interface ChatMessageListSkeletonProps {
   className?: string
   messageCount?: number
   showAvatars?: boolean
-  assistantType?: 'mingo' | 'fae'
+  /**
+   * Match `ChatMessageList`'s `fullWidth`: drop the centered
+   * `max-w-ods-content-narrow` column so the skeleton fills the panel and
+   * reflows on resize (instead of staying a fixed narrow column with large
+   * side gutters). Same semantics as the real list.
+   */
+  fullWidth?: boolean
+  /** Extra classes on the content column (e.g. host-provided padding). The
+   *  host wrapper is expected to own the panel padding; this stays empty by
+   *  default so the skeleton sits flush. */
   contentClassName?: string
 }
 
@@ -72,13 +67,12 @@ export function ChatMessageListSkeleton({
   className,
   messageCount = 6,
   showAvatars = true,
-  assistantType = 'fae',
-  contentClassName
+  fullWidth = false,
+  contentClassName,
 }: ChatMessageListSkeletonProps) {
   const messages = Array.from({ length: messageCount }, (_, index) => ({
     id: index,
     isUser: index % 3 === 0,
-    assistantType: assistantType
   }))
 
   return (
@@ -88,23 +82,29 @@ export function ChatMessageListSkeleton({
           "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",
-          className
+          className,
         )}
       >
-        <div className={cn("mx-auto flex w-full max-w-ods-content-narrow flex-col pb-[var(--spacing-system-xs)] min-w-0", contentClassName ?? "px-[var(--spacing-system-m)]")} style={{ minHeight: '100%' }}>
+        <div
+          className={cn(
+            fullWidth
+              ? "flex w-full flex-col min-w-0"
+              : "mx-auto flex w-full max-w-ods-content-narrow flex-col min-w-0",
+            contentClassName,
+          )}
+          style={{ minHeight: '100%' }}
+        >
+          {/* Bottom-anchor the rows like the real list. */}
           <div className="flex-1" />
-          <div className="space-y-6">
-            {messages.map((message) => (
-              <ChatMessageSkeleton
-                key={message.id}
-                showAvatar={showAvatars}
-                isUser={message.isUser}
-                assistantType={message.assistantType}
-              />
-            ))}
-          </div>
+          {messages.map((message) => (
+            <ChatMessageSkeleton
+              key={message.id}
+              showAvatar={showAvatars}
+              isUser={message.isUser}
+            />
+          ))}
         </div>
       </div>
     </div>
   )
-}
+}

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

@@ -0,0 +1,94 @@
+'use client'
+
+import { Chevron02LeftIcon, ClockHistoryIcon } from '../icons-v2-generated'
+import { Button } from '../ui/button'
+import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu'
+import { cn } from '../../utils/cn'
+import type { ChatPanelHeaderProps } from './chat-panel-header'
+
+export interface ChatPanelHeaderMobileProps extends ChatPanelHeaderProps {
+  className?: string
+}
+
+/**
+ * Mobile chat panel header — Figma node `7363:85532`. A distinct layout from
+ * the desktop bar (which packs full-height divider cells into a fixed `h-14`):
+ *
+ *   - Surface: `ods-card` with a bottom border; generous `l` side padding,
+ *     `l` bottom padding, and `xl` top padding on the title block (so the row
+ *     bottom-aligns under a tall header).
+ *   - Title: `text-h2` (vs the desktop `h3`/`h4`), truncated.
+ *   - Actions: 44px outlined icon buttons (`Button variant="outline"
+ *     size="icon"`) — a back chevron (when applicable) and a single trailing
+ *     `⋯` menu carrying the view-dependent actions. There is no Close action
+ *     (the drawer is dismissed via its backdrop / the back chevron); when no
+ *     action applies the `⋯` trigger is hidden entirely.
+ *
+ * Same prop contract as `ChatPanelHeader` (`onClose` is accepted for parity but
+ * unused here); the orchestrator renders this on mobile and the desktop bar on
+ * `md+`.
+ */
+export function ChatPanelHeaderMobile({
+  showBack = false,
+  title,
+  backAriaLabel = 'Back',
+  isArchivedView = false,
+  onBack,
+  onRestore,
+  onRename,
+  onArchive,
+  onOpenArchive,
+  className,
+}: ChatPanelHeaderMobileProps) {
+  // The right-hand ⋯ menu carries the view-dependent actions. Close is not
+  // listed (the panel is dismissed elsewhere); the trigger is hidden entirely
+  // when no action applies (e.g. the archive list view).
+  const menuItems = [
+    !showBack && onOpenArchive && { id: 'open-archive', label: 'Chat archive', icon: <ClockHistoryIcon className="w-full h-full" />, onClick: onOpenArchive },
+    isArchivedView && onRestore && { id: 'unarchive', label: 'Unarchive chat', onClick: onRestore },
+    !isArchivedView && onRename && { id: 'rename', label: 'Rename chat', onClick: onRename },
+    !isArchivedView && onArchive && { id: 'archive', label: 'Archive chat', onClick: onArchive },
+  ].filter(Boolean) as ActionsMenuItem[]
+
+  return (
+    <div
+      className={cn(
+        'flex-shrink-0 flex flex-col border-b border-ods-border bg-ods-card',
+        'px-[var(--spacing-system-l)] pb-[var(--spacing-system-l)]',
+        className,
+      )}
+    >
+      <div className="flex w-full items-end gap-[var(--spacing-system-sf)]">
+        {showBack && (
+          <Button
+            variant="outline"
+            size="icon"
+            aria-label={backAriaLabel}
+            onClick={onBack}
+            className="shrink-0"
+          >
+            <Chevron02LeftIcon />
+          </Button>
+        )}
+
+        {/* Title block — `xl` top padding pushes the title down so the row
+            bottom-aligns the title, back chevron, and ⋯ menu. */}
+        <div className="flex flex-1 min-w-0 items-end gap-[var(--spacing-system-m)] pt-[var(--spacing-system-xl)]">
+          <div className="flex flex-1 min-w-0 flex-col gap-[var(--spacing-system-xs)]">
+            <p className="min-w-0 truncate text-h2 text-ods-text-primary" title={title}>
+              {title}
+            </p>
+          </div>
+
+          {menuItems.length > 0 && (
+            <ActionsMenuDropdown
+              groups={[{ items: menuItems }]}
+              triggerAriaLabel="Chat actions"
+              triggerClassName="shrink-0 bg-ods-card border-ods-border hover:bg-ods-bg-hover flex items-center justify-center focus-visible:ring-0"
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -9,7 +9,16 @@ import {
 } from '../icons-v2-generated'
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon'
 import { ChatHeaderIconButton } from './chat-header-icon-button'
-import { MoreActionsMenu } from '../ui/more-actions-menu'
+import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu'
+import { ChatPanelHeaderMobile } from './chat-panel-header-mobile'
+
+/**
+ * Compact rounded header button used for the desktop back chevron. Borderless
+ * square with a hover background. (Mobile uses its own header component —
+ * `ChatPanelHeaderMobile`.)
+ */
+export const COMPACT_HEADER_BUTTON =
+  'inline-flex shrink-0 items-center justify-center size-8 rounded-md text-ods-text-secondary transition-colors hover:bg-ods-bg-hover hover:text-ods-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent'
 
 export interface ChatPanelHeaderProps {
   /** Show the back-chevron + bold (h3) title. When false, the static list
@@ -53,62 +62,81 @@ export function ChatPanelHeader({
   onArchive,
   onOpenArchive,
 }: ChatPanelHeaderProps) {
+  // Desktop ⋯ menu (active, non-archived conversation only) — rename / archive.
   const menuItems = [
-    onRename && { label: 'Rename chat', onClick: onRename },
-    onArchive && { label: 'Archive chat', onClick: onArchive },
-  ].filter(Boolean) as { label: string; onClick: () => void }[]
+    onRename && { id: 'rename', label: 'Rename chat', onClick: onRename },
+    onArchive && { id: 'archive', label: 'Archive chat', onClick: onArchive },
+  ].filter(Boolean) as ActionsMenuItem[]
 
   return (
-    <div className="flex-shrink-0 flex h-14 w-full overflow-hidden border-b border-ods-border bg-ods-card">
-      <div className="flex flex-1 min-w-0 items-center gap-2 px-4 py-3">
-        {showBack ? (
-          <>
-            <button
-              type="button"
-              onClick={onBack}
-              aria-label={backAriaLabel}
-              className="inline-flex shrink-0 items-center justify-center size-8 -ml-1 rounded-md text-ods-text-secondary transition-colors hover:bg-ods-bg-hover hover:text-ods-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent"
-            >
-              <Chevron01LeftIcon size={20} />
-            </button>
-            <span className="truncate text-h3 text-ods-text-primary">{title}</span>
-          </>
-        ) : (
-          <p className="truncate text-h4 text-ods-text-primary">{title}</p>
+    <>
+      {/* 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}
+      />
+
+      {/* 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">
+        <div className="flex flex-1 min-w-0 items-center gap-2 px-4 py-3">
+          {showBack ? (
+            <>
+              <button
+                type="button"
+                onClick={onBack}
+                aria-label={backAriaLabel}
+                className={`${COMPACT_HEADER_BUTTON} -ml-1`}
+              >
+                <Chevron01LeftIcon size={20} />
+              </button>
+              <span className="truncate text-h3 text-ods-text-primary">{title}</span>
+            </>
+          ) : (
+            <p className="truncate text-h3 text-ods-text-primary">{title}</p>
+          )}
+        </div>
+
+        {/* Restore (refresh) — archived chat header (Figma node 7361:425441). */}
+        {isArchivedView && onRestore && (
+          <ChatHeaderIconButton onClick={onRestore} aria-label="Unarchive chat">
+            <Refresh01LeftIcon size={24} />
+          </ChatHeaderIconButton>
         )}
-      </div>
 
-      {/* Restore (refresh) — archived chat header (Figma node 7361:425441). */}
-      {isArchivedView && onRestore && (
-        <ChatHeaderIconButton onClick={onRestore} aria-label="Unarchive chat">
-          <Refresh01LeftIcon size={24} />
-        </ChatHeaderIconButton>
-      )}
+        {/* Rename / Archive menu — active (non-archived) conversation only. */}
+        {showBack && !isArchivedView && menuItems.length > 0 && (
+          <ActionsMenuDropdown
+            triggerAriaLabel="Chat actions"
+            onCloseAutoFocus={(e) => e.preventDefault()}
+            groups={[{ items: menuItems }]}
+            customTrigger={
+              <ChatHeaderIconButton aria-label="Chat actions">
+                <Ellipsis01Icon size={24} />
+              </ChatHeaderIconButton>
+            }
+          />
+        )}
 
-      {/* Rename / Archive menu — active (non-archived) conversation only. */}
-      {showBack && !isArchivedView && menuItems.length > 0 && (
-        <MoreActionsMenu
-          ariaLabel="Chat actions"
-          onCloseAutoFocus={(e) => e.preventDefault()}
-          items={menuItems}
-          trigger={
-            <ChatHeaderIconButton aria-label="Chat actions">
-              <Ellipsis01Icon size={24} />
-            </ChatHeaderIconButton>
-          }
-        />
-      )}
+        {/* Chat Archive entry (Figma node 7532:225034) — list view only. */}
+        {!showBack && onOpenArchive && (
+          <ChatHeaderIconButton onClick={onOpenArchive} aria-label="Chat archive">
+            <ClockHistoryIcon size={24} />
+          </ChatHeaderIconButton>
+        )}
 
-      {/* Chat Archive entry (Figma node 7532:225034) — list view only. */}
-      {!showBack && onOpenArchive && (
-        <ChatHeaderIconButton onClick={onOpenArchive} aria-label="Chat archive">
-          <ClockHistoryIcon size={24} />
+        <ChatHeaderIconButton onClick={onClose} aria-label="Close">
+          <XmarkIcon size={24} />
         </ChatHeaderIconButton>
-      )}
-
-      <ChatHeaderIconButton onClick={onClose} aria-label="Close">
-        <XmarkIcon size={24} />
-      </ChatHeaderIconButton>
-    </div>
+      </div>
+    </>
   )
 }