@flamingo-stack/openframe-frontend-core 0.0.438-snapshot.20260716203356 → 0.0.438

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

@@ -31,7 +31,6 @@
  */
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { cn } from '../../utils/cn'
 import { useControllableState } from '@radix-ui/react-use-controllable-state'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { usePreventScroll } from '@react-aria/overlays'
@@ -48,18 +47,12 @@ import { EntityIcon } from '../icon-display'
 import { MingoOnboardingCard } from './mingo-onboarding-card'
 import { MingoOnboardingCardSkeleton } from './mingo-onboarding-card-skeleton'
 import { MingoWelcome, type MingoWelcomeProps } from './mingo-welcome'
-import { MingoHistoryRail } from './mingo-history-rail'
+import { MingoChatHistory } from './mingo-chat-history'
 import { GuideWelcome, type GuideWelcomeProps } from './guide-welcome'
 import { accentFromIdentityIcon, getAgentAccent } from './quick-action-chip'
 import { GuideModeBanner } from './guide-mode-banner'
 import { PortalContainerContext } from '../ui/portal-container'
-import { ChatPanelHeader, type ChatPanelHeaderProps } from './chat-panel-header'
-import { ChatHeaderIconButton } from './chat-header-icon-button'
-import { ChatHeaderSearchField } from './chat-header-search-field'
-import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu'
-import { Arrow02RightIcon, Arrow02LeftIcon, SearchIcon, ClockHistoryIcon, Ellipsis01Icon, Refresh01LeftIcon } from '../icons-v2-generated'
-import { Chevron02LeftIcon } from '../icons-v2-generated/arrows/chevron-02-left-icon'
-import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon'
+import { ChatPanelHeader } from './chat-panel-header'
 import { ChatArchivePage } from './chat-archive-page'
 import { ChatComposer } from './chat-composer'
 import { useChatDialogManager } from './hooks/use-chat-dialog-manager'
@@ -274,27 +267,18 @@ export interface EmbeddableChatProps {
    */
   shell?: 'drawer' | 'none'
 
-  /**
-   * Display name of the signed-in user, shown as the sub-line under the chat
-   * title in the panel header. The server-resolved chat identity
-   * (`useChatIdentity().user.name`) always wins when present; this is the
-   * host-supplied fallback so the header still shows who's signed in when the
-   * identity endpoint doesn't return a name (e.g. a tenant whose identity
-   * route omits it). Empty/undefined → the header renders the title alone.
-   */
-  userDisplayName?: string
-
   /**
    * Content overrides for the default (Mingo-mode) empty state
-   * (`<MingoWelcome>`): greeting `title`/`subtitle`, the `promo` card, and
-   * extra `quickActions` chips.
+   * (`<MingoWelcome>`): greeting `title`/`subtitle`, the capability
+   * `featureCards` grid, the `promo` card, and extra `quickActions` chips.
    * Each field falls back to the built-in OpenFrame defaults, so the kit
-   * stays platform-agnostic. `onStartGuideChat` and `hasExistingChats` are
-   * wired internally and are NOT overridable here. The quick-action
-   * hover-preview callbacks are also wired internally.
+   * stays platform-agnostic. `userName`, `onStartGuideChat` and
+   * `hasExistingChats` are wired internally and are NOT overridable here.
+   * The quick-action hover-preview callbacks are also wired internally.
    */
   mingoWelcome?: Omit<
     MingoWelcomeProps,
+    | 'userName'
     | 'onStartGuideChat'
     | 'hasExistingChats'
     | 'onQuickActionHover'
@@ -396,99 +380,6 @@ const mentionTokenOf = (key: string, markerByType: Map<string, string>): string
  */
 const FALLBACK_TOP_RETRIEVED = 3
 
-/**
- * Split (wide) Mingo layout metrics (Figma 113:60931 / 113:63630). The
- * "Current Chats" rail is a fixed 320px column; the chat block fills the rest
- * with a 400px floor. Below their sum the panel is too tight for two columns,
- * so the layout falls back to the stacked (single-column) view where the
- * history renders inline in the Mingo empty state. Purely width-driven and
- * self-contained — the host wires nothing.
- */
-const HISTORY_RAIL_WIDTH = 320
-const CHAT_BLOCK_MIN_WIDTH = 400
-const SPLIT_MIN_WIDTH = HISTORY_RAIL_WIDTH + CHAT_BLOCK_MIN_WIDTH
-
-/** Persists the user's rail collapse choice across drawer open/close + reloads. */
-const RAIL_COLLAPSED_STORAGE_KEY = 'mingo-chat-history-collapsed'
-
-/** Exit-timer budget (ms) before the collapsed rail unmounts — must cover the
- *  longest leave (`RAIL_COLLAPSE_MS`) plus a little slack so the width/opacity
- *  transition always settles before the element is removed. */
-const RAIL_ANIM_MS = 320
-
-/**
- * Presence + width-transition state for the history rail. The rail animates its
- * WIDTH (320 ⇄ 0) + opacity so the chat block grows/shrinks smoothly alongside
- * it — no hard reflow "jump" when it appears/disappears.
- *
- * - `mounted` — whether to render the rail at all (stays true through the leave
- *   so the collapse can play out before unmount).
- * - `active` — drives the expanded (`w-80 opacity-100`) vs collapsed
- *   (`w-0 opacity-0`) classes. On a fresh mount it flips true on the next frame
- *   so the open transitions from collapsed → expanded (an intro slide).
- */
-function useRailPresence(open: boolean): { mounted: boolean; active: boolean } {
-  const [mounted, setMounted] = useState(open)
-  // Start collapsed even when open, so the first paint transitions OPEN.
-  const [active, setActive] = useState(false)
-  useEffect(() => {
-    if (open) {
-      setMounted(true)
-      // Flip to expanded only AFTER the browser has painted the collapsed
-      // (w-0) frame — otherwise the mount + expand coalesce into one paint and
-      // the width transition never plays (the rail "pops" open). A single rAF
-      // fires before that first paint; a SECOND rAF lands after it, so the
-      // enter transition runs from a real w-0 → w-80.
-      let raf2 = 0
-      const raf1 = requestAnimationFrame(() => {
-        raf2 = requestAnimationFrame(() => setActive(true))
-      })
-      return () => {
-        cancelAnimationFrame(raf1)
-        cancelAnimationFrame(raf2)
-      }
-    }
-    setActive(false) // collapse (width/opacity transition to 0)
-    if (!mounted) return // already gone — nothing to unmount later
-    const t = setTimeout(() => setMounted(false), RAIL_ANIM_MS)
-    return () => clearTimeout(t)
-  }, [open, mounted])
-  return { mounted, active }
-}
-
-/**
- * Animated container for a history-rail cell (the header's "Current Chats" cell
- * and the body's list column). The OUTER box transitions its width 0 ⇄ 320 +
- * opacity (so the neighbouring chat block slides smoothly); the INNER keeps a
- * fixed `w-80` so the rail content never squishes mid-animation — it's just
- * clipped by the shrinking outer (`overflow-hidden`). One easing both ways;
- * the collapse runs a touch longer than the open for a soft close.
- */
-function RailSlot({
-  active,
-  innerClassName,
-  children,
-}: {
-  active: boolean
-  innerClassName?: string
-  children: React.ReactNode
-}) {
-  return (
-    <div
-      className={cn(
-        // Border on the OUTER so the rail/chat divider tracks the animating
-        // boundary (and fades out with the panel) instead of vanishing early.
-        'shrink-0 overflow-hidden border-r border-ods-border transition-[width,opacity] ease-out',
-        active
-          ? 'w-80 opacity-100 duration-[240ms]'
-          : 'w-0 opacity-0 duration-[300ms]',
-      )}
-    >
-      <div className={cn('h-full w-80', innerClassName)}>{children}</div>
-    </div>
-  )
-}
-
 /**
  * Built-in default route for an OpenFrame AI agent's display config — the
  * lowest-precedence fallback so "agent mode" works with ZERO endpoint wiring.
@@ -887,7 +778,6 @@ function EmbeddableChatInner({
   aiAgentConfigUrl: aiAgentConfigUrlProp,
   defaultActiveMode,
   shell = 'drawer',
-  userDisplayName,
   mingoWelcome,
   guideWelcome,
   contextPicker,
@@ -1009,17 +899,22 @@ function EmbeddableChatInner({
     [commandsUrl],
   )
 
-  // Header sub-line: the full display name shown under the chat title. The
-  // server-resolved identity wins; the host-supplied `userDisplayName` is the
-  // fallback so the header still names the signed-in user when the identity
-  // endpoint returns no name. Empty → the header shows the title alone.
-  const headerUserName =
-    identityUser?.name?.trim() ||
-    [identityUser?.firstName, identityUser?.lastName]
-      .filter(Boolean)
-      .join(' ')
-      .trim() ||
-    userDisplayName?.trim() ||
+  // Greeting first-name comes from the SERVER-resolved identity (single
+  // source of truth — never a client-injected runtime field). Resolution
+  // order:
+  //   1. `identityUser.firstName` — dedicated optional field from the
+  //      identity webservice (populated via `X-Chat-First-Name` for
+  //      bearer-act-as, or by the hub's profile lookup for cookie sessions).
+  //   2. `identityUser.name.split(' ')[0]` — legacy fallback for sources
+  //      that only return a full name. Empty-string-safe (`?.`-chain).
+  //   3. `undefined` — anon, loading, or no name available → greeting
+  //      collapses to the no-name variant `Hey, I'm Mingo`.
+  // We coalesce an empty string to `undefined` so the JSX `userName ? …`
+  // branch treats `''` the same as missing — embedders that send
+  // `firstName: ''` shouldn't render `Hey , I'm Mingo`.
+  const userName =
+    (identityUser?.firstName?.trim() ||
+      identityUser?.name?.split(' ')[0]?.trim()) ||
     undefined
 
   // Synthesize `modes` from legacy props when the new API isn't used.
@@ -1589,7 +1484,6 @@ function EmbeddableChatInner({
     archivedDialogs,
     archivedCursor,
     archivedLoading,
-    archivedPending,
     openArchive,
     closeArchive,
     loadArchivedPage,
@@ -1598,7 +1492,6 @@ function EmbeddableChatInner({
     isOpeningDialog,
     isViewingArchived,
     handleBack,
-    resetToNewChat,
     activeDialog,
     renameTarget,
     setRenameTarget,
@@ -1757,189 +1650,6 @@ function EmbeddableChatInner({
   // Host node for in-panel Radix portals (see the body wrapper below).
   const [portalHost, setPortalHost] = useState<HTMLDivElement | null>(null)
 
-  // ── Split (wide) Mingo layout ─────────────────────────────────────────────
-  // The panel measures its own width and, in Mingo mode, promotes the inline
-  // dialog history to a fixed 320px "Current Chats" rail once there's room for
-  // both it and a 400px chat block. Narrower than that (or collapsed, or Guide
-  // mode / archive page) it stays the stacked single-column layout with the
-  // history inline in the empty state. Fully self-contained — the host opts
-  // into nothing; the switch is width-driven inside this component.
-  const [panelWidth, setPanelWidth] = useState(0)
-  const panelMeasureRef = useRef<HTMLDivElement | null>(null)
-  useEffect(() => {
-    const el = panelMeasureRef.current
-    if (!el || typeof ResizeObserver === 'undefined') return
-    const ro = new ResizeObserver((entries) => {
-      const w = entries[0]?.contentRect?.width
-      if (typeof w === 'number') setPanelWidth(w)
-    })
-    ro.observe(el)
-    setPanelWidth(el.clientWidth)
-    return () => ro.disconnect()
-  }, [])
-
-  // Rail collapse toggle (Figma ⟶| control), persisted so it survives the
-  // drawer remounting on close.
-  const [railCollapsed, setRailCollapsed] = useState(false)
-  useEffect(() => {
-    try {
-      if (window.localStorage.getItem(RAIL_COLLAPSED_STORAGE_KEY) === '1')
-        setRailCollapsed(true)
-    } catch {
-      // Storage can throw (private mode) — default to expanded.
-    }
-  }, [])
-  const toggleRailCollapsed = useCallback(() => {
-    setRailCollapsed((prev) => {
-      const next = !prev
-      try {
-        window.localStorage.setItem(RAIL_COLLAPSED_STORAGE_KEY, next ? '1' : '0')
-      } catch {
-        // Best-effort persistence; the in-memory state still applies this session.
-      }
-      return next
-    })
-  }, [])
-
-  // Header magnifier toggle — reveals the rail's built-in list search bar on
-  // demand (matches the Figma header). Only meaningful when search is wired.
-  const [railSearchOpen, setRailSearchOpen] = useState(false)
-
-  // Layout decision. `wideMingo` gates the desktop two-cell header (which hosts
-  // the expand control even while collapsed); `splitActive` additionally
-  // requires the rail to be expanded before its column renders. The archive
-  // page stays split-eligible: in wide mode it opens INSIDE the left rail (the
-  // right chat block stays put), and only falls back to the full-panel archive
-  // when stacked/collapsed.
-  const splitEligible = activeMode === 'mingo'
-  const canSplit = panelWidth >= SPLIT_MIN_WIDTH
-  // Embedded previews (hero demo tabs) always use the compact single-column
-  // header, never the two-column split — so `previewMode` opts out of `wideMingo`.
-  const wideMingo = splitEligible && canSplit && !previewMode
-  const splitActive = wideMingo && !railCollapsed
-  // Keep the "Current Chats" rail (header cell + list column) mounted through
-  // its width/opacity collapse so it eases away instead of hard-cutting; both
-  // synchronized parts wrap in `<RailSlot active={railPresence.active}>`.
-  const railPresence = useRailPresence(splitActive)
-  // The wide header is used for BOTH wide layouts — split (rail beside the chat)
-  // and collapsed (`wideCollapsed`: chat / new-chat welcome in the fill column,
-  // rail hidden). Its built-in corner toggle expands/collapses the rail — the
-  // only chat-list navigation in wide mode, so there's no back chevron here.
-  // `|| railPresence.mounted` keeps it through the rail's exit animation when a
-  // resize drops below the split threshold (wideMingo → narrow).
-  const showWideHeader = wideMingo || railPresence.mounted
-
-  // ── Narrow (stacked) list ⇄ compose navigation ────────────────────────────
-  // The redesigned narrow layout (Figma 341:36190 / 113:69276) splits the old
-  // combined empty state into two views: a "Current Chats" LIST (no composer)
-  // and a "New Chat" COMPOSE view (greeting + composer) reached from the list's
-  // "Start New Chat" button. Wide mode shows both columns at once, so this only
-  // drives the single-column presentation.
-  const [composeOpen, setComposeOpen] = useState(false)
-  // Opening a conversation supersedes the compose view — reset it so backing out
-  // of the conversation lands on the list, not a stale compose screen.
-  useEffect(() => {
-    if (hasConversation) setComposeOpen(false)
-  }, [hasConversation])
-  const isMingoMode = activeMode === 'mingo'
-  // The stacked "Current Chats" list — the NARROW single-column Mingo view. It
-  // is a narrow-only layout: in any wide layout the chat list lives in the rail,
-  // and collapsing the rail (`wideCollapsed`) shows the chat / new-chat welcome
-  // in the fill column (navigation is via re-expanding the rail), NOT the list.
-  // Requires no open conversation, no archive, and not composing (the composer
-  // lives on the compose view).
-  const stackedListView =
-    isMingoMode &&
-    !hasConversation &&
-    !archiveOpen &&
-    !wideMingo &&
-    !composeOpen
-
-  // Shared header derivations — consumed by the stacked `ChatPanelHeader`, its
-  // mobile fallback, and the desktop split header's right cell, so the title /
-  // back / ⋯ semantics can't drift between layouts.
-  const headerShowBack = hasConversation || guideCanReturnToMingo
-  const headerTitle = hasConversation
-    ? activeDialog?.title || 'New Chat'
-    : isGuideEmpty
-      ? (headerAssistantName ?? 'Mingo Guide')
-      : 'Current Chats'
-  const headerBackAriaLabel = hasConversation
-    ? isViewingArchived
-      ? 'Back to archive'
-      : 'Back'
-    : 'Back to Mingo'
-  const headerOnBack = hasConversation
-    ? handleBack
-    : () => handleActiveModeChange('mingo')
-  const headerOnRestore =
-    isViewingArchived && unarchiveDialog && activeDialog
-      ? () => setRestoreTarget(activeDialog)
-      : undefined
-  const headerOnRename =
-    activeDialogId && activeDialog && mingoCaps.canRename
-      ? () => setRenameTarget(activeDialog)
-      : undefined
-  const headerOnArchive =
-    activeDialogId && activeDialog && mingoCaps.canArchive
-      ? () => setArchiveTarget(activeDialog)
-      : undefined
-  const headerOnOpenArchive = fetchArchivedDialogs ? openArchive : undefined
-
-  // "Start New Chat" (rail button) — reset to the new-chat welcome. Uses the
-  // dedicated reset (not `handleBack`, which would reopen the archive when the
-  // open conversation is archived) so it always lands on a fresh chat.
-  const handleNewChat = useCallback(() => {
-    resetToNewChat()
-  }, [resetToNewChat])
-
-  // Desktop split header ⋯ menu (active, non-archived conversation only).
-  const splitHeaderMenuItems = [
-    headerOnRename && { id: 'rename', label: 'Rename chat', onClick: headerOnRename },
-    headerOnArchive && { id: 'archive', label: 'Archive chat', onClick: headerOnArchive },
-  ].filter(Boolean) as ActionsMenuItem[]
-
-  // Narrow (single-column) header. The Mingo empty state splits into a "Current
-  // Chats" list header (search + archive, no back) and a "New Chat" compose
-  // header (back to the list); conversations + guide keep the shared header
-  // derivations. Wide mode uses its own two-cell header instead.
-  const narrowMingoEmpty = isMingoMode && !hasConversation && !archiveOpen
-  const narrowHeaderProps: ChatPanelHeaderProps = narrowMingoEmpty
-    ? composeOpen
-      ? {
-          showBack: true,
-          title: 'New Chat',
-          subtitle: headerUserName,
-          backAriaLabel: 'Back to chats',
-          onBack: () => setComposeOpen(false),
-          onClose: handleClose,
-        }
-      : {
-          showBack: false,
-          title: 'Current Chats',
-          onClose: handleClose,
-          onOpenArchive: headerOnOpenArchive,
-          onToggleSearch: mingoCaps.onSearchChange
-            ? () => setRailSearchOpen((o) => !o)
-            : undefined,
-          searchActive: railSearchOpen,
-          searchQuery: mingoCaps.searchQuery,
-          onSearchChange: mingoCaps.onSearchChange,
-        }
-    : {
-        showBack: headerShowBack,
-        title: headerTitle,
-        subtitle: headerUserName,
-        backAriaLabel: headerBackAriaLabel,
-        isArchivedView: isViewingArchived,
-        onBack: headerOnBack,
-        onClose: handleClose,
-        onRestore: headerOnRestore,
-        onRename: headerOnRename,
-        onArchive: headerOnArchive,
-        onOpenArchive: headerOnOpenArchive,
-      }
-
   // Chat body — defined once, then rendered inside whichever shell applies.
   // Radix overlays (⋯ menus, tooltips) portal into `portalHost` — a node inside
   // this panel — so they inherit the drawer's stacking context and need only a
@@ -1948,31 +1658,22 @@ function EmbeddableChatInner({
   const body = (
         <PortalContainerContext.Provider value={portalHost}>
             {/* Panel surface depends on state (Figma):
-                  • Narrow "Current Chats" LIST + FULL-PANEL archive page → grey
-                    `ods-card` (#212121) — matching the grey rail those lists live
-                    in when the panel is wide,
-                  • Mingo welcome / compose (node 113:69208), Guide empty
-                    (node 7532:328223), and the active conversation → dark
+                  • Mingo empty / returning-user + archive page → grey
+                    `ods-card` (#212121),
+                  • Guide empty (node 7532:328223) + active conversation → dark
                     `ods-bg` (#161616).
                 The header keeps its own grey `bg-ods-card`; the content and
-                footer have no bg and inherit this root, so they flip together.
-                The archive only tints the root when it's FULL-PANEL (`!splitActive`)
-                — in the split layout it lives in the rail (which owns its own
-                grey), so the chat block on the right must keep the conversation's
-                dark surface instead of following the archive. */}
+                footer have no bg and inherit this root, so they flip together. */}
             <div
-              ref={panelMeasureRef}
               className={`flex h-full flex-col overflow-hidden transition-colors duration-200 ${
-                (archiveOpen && !splitActive) || stackedListView
+                archiveOpen || (!hasConversation && activeMode === 'mingo')
                   ? 'bg-ods-card'
                   : 'bg-ods-bg'
               } ${previewMode ? 'pointer-events-none select-none' : ''}`}
             >
               {/* Archive-page ↔ chat-panel swap fades in (200ms) to match the
-                  surface flip. The full-panel archive is used only when NOT in
-                  the wide split layout — there the archive opens inside the left
-                  rail instead (see the rail column below). */}
-              {archiveOpen && !splitActive ? (
+                  surface flip — both branches share the same view-change feel. */}
+              {archiveOpen ? (
                 <div
                   key="archive-view"
                   className="flex flex-1 min-h-0 flex-col animate-in fade-in-0 duration-200"
@@ -1983,7 +1684,6 @@ function EmbeddableChatInner({
                     onBack={closeArchive}
                     onClose={handleClose}
                     isLoading={archivedLoading}
-                    isFetching={archivedPending}
                     hasMore={archivedCursor != null}
                     onLoadMore={() => {
                       void loadArchivedPage(archivedCursor ?? undefined)
@@ -1995,143 +1695,54 @@ function EmbeddableChatInner({
                 key="chat-view"
                 className="flex flex-1 min-h-0 flex-col animate-in fade-in-0 duration-200"
               >
-              {showWideHeader ? (
-                // Wide Mingo header (Figma 113:60931 / 113:63630). Split: a
-                // two-cell bar — the "Current Chats" rail header (search /
-                // archive / collapse) over the 320px rail + the chat-block header
-                // (title / ⋯ / close) over the fill column. Collapsed
-                // (`wideCollapsed`): the rail cell is gone, leaving the corner
-                // expand toggle + the chat-block header (the fill column shows
-                // the chat / new-chat welcome). No back chevron — chat-list
-                // navigation is the rail toggle. Shown whenever the panel is wide
-                // enough to split (`panelWidth ≥ SPLIT_MIN_WIDTH`), NOT gated on
-                // the viewport `md` breakpoint — otherwise a 720–799px panel on a
-                // sub-`md` viewport would split the body yet drop to the mobile
-                // single-bar header (no rail search / collapse controls).
-                <div className="flex h-14 w-full flex-shrink-0 overflow-hidden border-b border-ods-border bg-ods-card">
-                    {railPresence.mounted && (
-                      <RailSlot
-                        active={railPresence.active}
-                        innerClassName="flex overflow-hidden"
-                      >
-                        {archiveOpen ? (
-                          // Archive open in the wide layout — the rail header
-                          // turns into a "Chat Archive" back bar (the list itself
-                          // renders in the rail below); the chat block is untouched.
-                          // Back is a full-height leading cell, matching the other
-                          // header cells (not a small inline chevron).
-                          <>
-                            <ChatHeaderIconButton
-                              divider="right"
-                              onClick={closeArchive}
-                              aria-label="Back to chats"
-                            >
-                              <Chevron02LeftIcon size={24} />
-                            </ChatHeaderIconButton>
-                            <div className="flex min-w-0 flex-1 items-center px-[var(--spacing-system-mf)]">
-                              <span className="min-w-0 flex-1 truncate text-h3 text-ods-text-primary">
-                                Chat Archive
-                              </span>
-                            </div>
-                          </>
-                        ) : (
-                          // "Current Chats" rail header — title fills, then the
-                          // search + archive controls. When search is open the
-                          // inline field takes over the title area in place
-                          // (Figma 116:51217) and the magnifier toggle is hidden.
-                          <>
-                            {railSearchOpen && mingoCaps.onSearchChange ? (
-                              <ChatHeaderSearchField
-                                initialValue={mingoCaps.searchQuery}
-                                onSearchChange={mingoCaps.onSearchChange}
-                                onCollapse={() => setRailSearchOpen(false)}
-                              />
-                            ) : (
-                              <>
-                                <div className="flex min-w-0 flex-1 items-center px-[var(--spacing-system-mf)]">
-                                  <span className="min-w-0 flex-1 truncate text-h3 text-ods-text-primary">
-                                    Current Chats
-                                  </span>
-                                </div>
-                                {mingoCaps.onSearchChange && (
-                                  <ChatHeaderIconButton
-                                    onClick={() => setRailSearchOpen((o) => !o)}
-                                    aria-label="Search chats"
-                                    aria-pressed={railSearchOpen}
-                                  >
-                                    <SearchIcon size={24} />
-                                  </ChatHeaderIconButton>
-                                )}
-                              </>
-                            )}
-                            {headerOnOpenArchive && (
-                              <ChatHeaderIconButton onClick={headerOnOpenArchive} aria-label="Chat archive">
-                                <ClockHistoryIcon size={24} />
-                              </ChatHeaderIconButton>
-                            )}
-                          </>
-                        )}
-                      </RailSlot>
-                    )}
-
-                    <div className="flex flex-1 min-w-0">
-                      {/* Rail collapse / expand toggle — lives on the chat side,
-                          at its left edge (Figma 259:90465). Right arrow collapses
-                          the list; left arrow brings it back. */}
-                      <button
-                        type="button"
-                        onClick={toggleRailCollapsed}
-                        aria-label={splitActive ? 'Collapse chat list' : 'Show chat list'}
-                        aria-pressed={!splitActive}
-                        className="flex size-14 shrink-0 items-center justify-center border-r border-ods-border 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"
-                      >
-                        {splitActive ? <Arrow02RightIcon size={24} /> : <Arrow02LeftIcon size={24} />}
-                      </button>
-                      {/* No back cell in the wide layout — the left rail (and
-                          its collapse/expand toggle) already provides chat-list
-                          navigation, so a back chevron would be redundant. */}
-                      <div className="flex flex-1 min-w-0 items-center px-[var(--spacing-system-mf)] py-[var(--spacing-system-sf)]">
-                        <div className="flex min-w-0 flex-col">
-                          <p className="truncate text-h3 leading-tight text-ods-text-primary">
-                            {headerShowBack ? headerTitle : 'New Chat'}
-                          </p>
-                          {headerUserName && (
-                            <p className="truncate text-h6 leading-tight text-ods-text-secondary">
-                              {headerUserName}
-                            </p>
-                          )}
-                        </div>
-                      </div>
-
-                      {isViewingArchived && headerOnRestore && (
-                        <ChatHeaderIconButton onClick={headerOnRestore} aria-label="Unarchive chat">
-                          <Refresh01LeftIcon size={24} />
-                        </ChatHeaderIconButton>
-                      )}
-                      {headerShowBack && !isViewingArchived && splitHeaderMenuItems.length > 0 && (
-                        <ActionsMenuDropdown
-                          triggerAriaLabel="Chat actions"
-                          onCloseAutoFocus={(e) => e.preventDefault()}
-                          groups={[{ items: splitHeaderMenuItems }]}
-                          customTrigger={
-                            <ChatHeaderIconButton aria-label="Chat actions">
-                              <Ellipsis01Icon size={24} />
-                            </ChatHeaderIconButton>
-                          }
-                        />
-                      )}
-                      <ChatHeaderIconButton onClick={handleClose} aria-label="Close">
-                        <XmarkIcon size={24} />
-                      </ChatHeaderIconButton>
-                    </div>
-                  </div>
-              ) : (
-                // Narrow single-column header — list / compose / conversation /
-                // guide, resolved into `narrowHeaderProps` above. (Wide layouts,
-                // including rail-collapsed, use the wide header above.) Embedded
-                // previews (hero demo tabs) force the compact bar via `compact`.
-                <ChatPanelHeader {...narrowHeaderProps} compact={previewMode} />
-              )}
+              <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
+                // keeps the static "Current Chats" title.
+                showBack={hasConversation || guideCanReturnToMingo}
+                title={
+                  hasConversation
+                    ? activeDialog?.title || 'New Chat'
+                    : isGuideEmpty
+                      ? (headerAssistantName ?? 'Mingo Guide')
+                      : 'Current Chats'
+                }
+                backAriaLabel={
+                  hasConversation
+                    ? isViewingArchived
+                      ? 'Back to archive'
+                      : 'Back'
+                    : 'Back to Mingo'
+                }
+                isArchivedView={isViewingArchived}
+                onBack={
+                  hasConversation
+                    ? handleBack
+                    : () => handleActiveModeChange('mingo')
+                }
+                onClose={handleClose}
+                onRestore={
+                  isViewingArchived && unarchiveDialog && activeDialog
+                    ? () => setRestoreTarget(activeDialog)
+                    : undefined
+                }
+                onRename={
+                  activeDialogId && activeDialog && mingoCaps.canRename
+                    ? () => setRenameTarget(activeDialog)
+                    : undefined
+                }
+                onArchive={
+                  activeDialogId && activeDialog && mingoCaps.canArchive
+                    ? () => setArchiveTarget(activeDialog)
+                    : undefined
+                }
+                onOpenArchive={fetchArchivedDialogs ? openArchive : undefined}
+              />
 
               {/* Guide-mode indicator banner (Figma node 7532:328222) —
                   full-bleed accent strip below the header. Shown only when
@@ -2150,77 +1761,11 @@ function EmbeddableChatInner({
                   places it, mirroring `GuideModeBanner` above. */}
               {activeMode === 'mingo' && mingoContextBanner}
 
-              {/* Chat-panel row. In the wide Mingo layout (`splitActive`) the
-                  dialog history is hoisted into a fixed 320px "Current Chats"
-                  rail on the left; the stacked layout keeps it inline in the
-                  Mingo empty state (`<MingoChatHistory>` via `<MingoWelcome>`). */}
+              {/* Chat-panel row. The dialog history is rendered inline in the
+                  Mingo empty state (`<MingoChatHistory>`), so there's no
+                  separate left sidebar. */}
               <div className="flex flex-1 min-h-0 overflow-hidden">
-                {railPresence.mounted && (
-                  <RailSlot
-                    active={railPresence.active}
-                    innerClassName="flex flex-col min-h-0 bg-ods-card"
-                  >
-                    {archiveOpen ? (
-                      // Archive list inside the rail (header lives in the split
-                      // header's left cell above). Right chat block stays put.
-                      <ChatArchivePage
-                        embedded
-                        dialogs={archivedDialogs}
-                        onSelectDialog={handleArchivedSelect}
-                        isLoading={archivedLoading}
-                        isFetching={archivedPending}
-                        hasMore={archivedCursor != null}
-                        onLoadMore={() => {
-                          void loadArchivedPage(archivedCursor ?? undefined)
-                        }}
-                      />
-                    ) : (
-                      <MingoHistoryRail
-                        dialogs={dialogs}
-                        activeDialogId={activeDialogId ?? undefined}
-                        onSelectDialog={handleSelectDialog}
-                        onNewChat={handleNewChat}
-                        onRequestRename={mingoCaps.canRename ? setRenameTarget : undefined}
-                        onRequestArchive={mingoCaps.canArchive ? setArchiveTarget : undefined}
-                        searchQuery={mingoCaps.searchQuery}
-                        hasMore={hasMoreDialogs}
-                        isLoadingMore={isDialogsLoading && dialogs.length > 0}
-                        onLoadMore={() => {
-                          void loadMoreDialogs()
-                        }}
-                        isLoadingHistory={dialogsInitialLoading}
-                        loadError={dialogsLoadError}
-                        onRetry={reloadDialogs}
-                      />
-                    )}
-                  </RailSlot>
-                )}
                 <div className="flex flex-1 flex-col min-h-0 min-w-0">
-                {stackedListView ? (
-                  // Narrow "Current Chats" list (Figma 341:36190) — the default
-                  // single-column view. No composer here; "Start New Chat" opens
-                  // the compose view.
-                  <MingoHistoryRail
-                    className="animate-in fade-in-0 duration-200"
-                    dialogs={dialogs}
-                    activeDialogId={activeDialogId ?? undefined}
-                    onSelectDialog={handleSelectDialog}
-                    onNewChat={() => setComposeOpen(true)}
-                    newChatAlways
-                    onRequestRename={mingoCaps.canRename ? setRenameTarget : undefined}
-                    onRequestArchive={mingoCaps.canArchive ? setArchiveTarget : undefined}
-                    searchQuery={mingoCaps.searchQuery}
-                    hasMore={hasMoreDialogs}
-                    isLoadingMore={isDialogsLoading && dialogs.length > 0}
-                    onLoadMore={() => {
-                      void loadMoreDialogs()
-                    }}
-                    isLoadingHistory={dialogsInitialLoading}
-                    loadError={dialogsLoadError}
-                    onRetry={reloadDialogs}
-                  />
-                ) : (
-                <>
 
               <div
                 ref={galleryPanelRef}
@@ -2298,25 +1843,59 @@ function EmbeddableChatInner({
                      quick-action chips. Guide mode keeps the slash-command
                      onboarding list below. */
                   <MingoWelcome
+                    userName={userName}
                     onStartGuideChat={
                       effectiveModes.guide
                         ? () => handleActiveModeChange('guide')
                         : undefined
                     }
                     {...mingoWelcome}
-                    // History now lives in its own list view (the wide rail or
-                    // the narrow "Current Chats" list), so the welcome is always
-                    // the new-user compose surface: greeting + grid + promo +
-                    // primary Guide chip.
-                    hasExistingChats={false}
-                    // Hover/focus PREVIEWS the action's full prompt as ghost text
-                    // in the empty composer (see `quickActionPreview` /
-                    // `ChatInput.previewText`). Wired after the `{...mingoWelcome}`
-                    // spread so the host can't override it.
+                    // NOTE: admin "try-asking chips" (suggestedQueries) are
+                    // intentionally NOT surfaced in Mingo mode — they belong to
+                    // the Guide-mode empty state only. Mingo shows just the
+                    // host-provided `mingoWelcome.quickActions` (via the spread).
+                    // Derived internally (returning-user variation) — placed
+                    // after the spread so it can't be overridden by the prop.
+                    hasExistingChats={dialogs.length > 0}
+                    isLoadingHistory={dialogsInitialLoading}
+                    loadError={dialogsLoadError}
+                    onRetry={reloadDialogs}
+                    historySearchable={!!mingoCaps.onSearchChange}
+                    // Hover/focus PREVIEWS the action's full prompt as ghost
+                    // text in the empty composer — same behaviour as Guide-mode
+                    // chips (see `quickActionPreview` / `ChatInput.previewText`).
+                    // Wired after the `{...mingoWelcome}` spread so the host
+                    // can't override it.
                     onQuickActionHover={(action) =>
                       setQuickActionPreview(action.prompt ?? action.label)
                     }
                     onQuickActionHoverEnd={() => setQuickActionPreview(null)}
+                    dialogHistory={
+                      // Keep the history (and its search bar) mounted during an
+                      // active search even at 0 results — otherwise a no-match
+                      // query would unmount the bar and flash the new-user
+                      // greeting. `MingoWelcome` renders `dialogHistory` with top
+                      // priority, so this wins over the greeting.
+                      dialogs.length > 0 || !!mingoCaps.searchQuery ? (
+                        <MingoChatHistory
+                          dialogs={dialogs}
+                          onSelectDialog={handleSelectDialog}
+                          onRequestRename={
+                            mingoCaps.canRename ? setRenameTarget : undefined
+                          }
+                          onRequestArchive={
+                            mingoCaps.canArchive ? setArchiveTarget : undefined
+                          }
+                          searchQuery={mingoCaps.searchQuery}
+                          onSearchChange={mingoCaps.onSearchChange}
+                          hasMore={hasMoreDialogs}
+                          isLoadingMore={isDialogsLoading && dialogs.length > 0}
+                          onLoadMore={() => {
+                            void loadMoreDialogs()
+                          }}
+                        />
+                      ) : undefined
+                    }
                   />
                 ) : (
                   /* Figma node 7532:328214 — Guide-mode empty state: greeting
@@ -2460,8 +2039,6 @@ function EmbeddableChatInner({
                   breakdown: currentUsageBreakdown ?? undefined,
                 }}
               />
-                </>
-                )}
                 </div>
               </div>
               </div>