@flamingo-stack/openframe-frontend-core 0.0.466 → 0.0.467-snapshot.20260723125044

package/src/components/announcement-bar.tsx

@@ -1,20 +1,21 @@
-"use client";
+'use client';
 
-import { useEffect, useMemo, useRef, useState } from 'react';
 import { X } from 'lucide-react';
-import { Button } from './ui/button';
-import { EntityIcon } from './icon-display';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEndpointsRuntime } from '../contexts/endpoints-runtime-context';
+import { useSelfFetch } from '../hooks/use-self-fetch';
+import type { Announcement, AnnouncementBarProps, AnnouncementResponse } from '../types/announcement';
+import { ANNOUNCEMENT_CTA_DEFAULTS } from '../types/announcement';
 import {
+  clearLegacyAnnouncementCache,
   dismissAnnouncement,
   isAnnouncementDismissed,
-  clearLegacyAnnouncementCache,
 } from '../utils/announcement-storage';
-import { ANNOUNCEMENT_CTA_DEFAULTS } from '../types/announcement';
-import type { Announcement, AnnouncementBarProps, AnnouncementResponse } from '../types/announcement';
 import { getAppType } from '../utils/app-config';
-import { useEndpointsRuntime } from '../contexts/endpoints-runtime-context';
-import { useSelfFetch } from '../hooks/use-self-fetch';
 import { pickReadableTextColor } from '../utils/color-analysis';
+import { EntityIcon } from './icon-display';
+import { AnnouncementBarView } from './ui/announcement-bar-view';
+import { Button } from './ui/button';
 
 /**
  * Platform announcement bar — DUAL MODE, works with or without SSR.
@@ -41,11 +42,7 @@ import { pickReadableTextColor } from '../utils/color-analysis';
  * storage reads happen ONLY in effects (a render-time read would desync
  * hydration in SSR mode).
  */
-export function AnnouncementBar({
-  initialAnnouncement,
-  previewMode = false,
-  className,
-}: AnnouncementBarProps = {}) {
+export function AnnouncementBar({ initialAnnouncement, previewMode = false, className }: AnnouncementBarProps = {}) {
   // Namespace for the dismissal cookie/legacy keys. Next hosts inline
   // NEXT_PUBLIC_APP_TYPE (matching the server's currentPlatform(), which the
   // hub layout uses for the SSR cookie read); platform-agnostic embeds get
@@ -55,7 +52,7 @@ export function AnnouncementBar({
 
   // Optional endpoint runtime: no provider → no URL → fetching disabled.
   const endpoints = useEndpointsRuntime();
-  const url = previewMode ? null : endpoints?.announcementsUrl ?? null;
+  const url = previewMode ? null : (endpoints?.announcementsUrl ?? null);
 
   // MUST be memoized (the hook re-syncs on [initialData] identity — an inline
   // literal per render would setData-loop) and strict-undefined-mapped:
@@ -157,18 +154,20 @@ export function AnnouncementBar({
   // dark-toned needs the dark theme's). `.theme-light` / `.theme-dark` are
   // the design system's own scoping classes (ods-colors.css) and flip every
   // Tier-1 `--ods-*` primitive for descendants.
-  const themeScope = pickReadableTextColor(displayAnnouncement.background_color) === 'dark' ? 'theme-light' : 'theme-dark';
+  const themeScope =
+    pickReadableTextColor(displayAnnouncement.background_color) === 'dark' ? 'theme-light' : 'theme-dark';
 
-  // Inside the scope, colors reference Tier-1 theme primitives directly
-  // (Tier-2 `--color-*` aliases resolve once at :root and do NOT re-resolve
-  // in a nested theme scope — verified). `--ods-system-greys-white` is the
-  // theme's primary-text primitive; `--ods-system-greys-black-hover/-action`
-  // are its quiet hover/active surfaces. Every value comes from the active
-  // ODS theme; nothing is hardcoded.
+  // Inside the scope, colors reference Tier-2 semantic aliases. Aliases
+  // declared only at :root would NOT re-resolve in a nested theme scope
+  // (they compute at :root), so ods-colors.css re-anchors these three inside
+  // `.theme-light` / `.theme-dark` specifically for theme islands like this
+  // bar. Every value comes from the active ODS theme; nothing is hardcoded.
   const barButtonClasses =
-    'text-[color:var(--ods-system-greys-white)] hover:bg-[var(--ods-system-greys-black-hover)] active:bg-[var(--ods-system-greys-black-action)]';
+    'text-[color:var(--color-text-primary)] hover:bg-[var(--color-bg-hover)] active:bg-[var(--color-bg-active)]';
 
-  const hasCta = Boolean(displayAnnouncement.cta_enabled && displayAnnouncement.cta_url && displayAnnouncement.cta_text);
+  const hasCta = Boolean(
+    displayAnnouncement.cta_enabled && displayAnnouncement.cta_url && displayAnnouncement.cta_text,
+  );
 
   return (
     <div
@@ -184,32 +183,23 @@ export function AnnouncementBar({
       style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}
     >
       {/*
-        Bar anatomy follows the announcement-bar industry standard: ONE line of
-        text at 13-14px inside a 44px-tall strip (guides converge on 40-60px
-        with a single sentence; two stacked 18px rows blew past that), title +
-        description merged inline (description hidden on small screens), ONE
-        compact CTA on the right, and a ghost-icon dismiss (design-system
-        icon-sm: 32px target, >= the 24px WCAG 2.2 SC 2.5.8 AA floor).
+        Markup is the shared pure view (AnnouncementBarView, Figma
+        9364-40603 / 9418-43969 / 9418-44006): one row from `md` (800px) up,
+        stacked below it with the CTA stretched full-width next to the
+        content-width dismiss. The CTA Button is now rendered on EVERY
+        breakpoint (it replaced the old whole-bar mobile tap target, which
+        also retires the 768px window.innerWidth check that disagreed with
+        the md:800px breakpoint).
       */}
-      <div className={`min-h-0 overflow-hidden ${themeScope}`} style={{ backgroundColor: displayAnnouncement.background_color }}>
-        <div className="flex items-center w-full max-w-full min-h-11 text-[color:var(--ods-system-greys-white)]">
-          {/* Mobile: whole-bar tap target (touch-first by design; the CTA
-              Button below is the keyboard/AT path and is CSS-hidden < md —
-              known tradeoff carried from the original bar). */}
-          <div
-            className={`flex flex-row gap-2 md:gap-3 items-center pl-4 md:pl-6 py-1.5 flex-1 min-w-0 ${
-              hasCta ? 'md:cursor-default cursor-pointer' : ''
-            }`}
-            onClick={(e) => {
-              // Only handle click on mobile (< 768px) and if CTA is enabled
-              if (window.innerWidth < 768 && hasCta) {
-                e.preventDefault();
-                handleCtaClick();
-              }
-            }}
-          >
-            {/* ONE unified icon path (shared with the chat): uploaded image URL
-                wins, else a library glyph by name (+ props), via <EntityIcon>. */}
+      <div
+        className={`min-h-0 overflow-hidden ${themeScope}`}
+        style={{ backgroundColor: displayAnnouncement.background_color }}
+      >
+        <AnnouncementBarView
+          className="text-[color:var(--color-text-primary)]"
+          startAdornment={
+            /* ONE unified icon path (shared with the chat): uploaded image URL
+               wins, else a library glyph by name (+ props), via <EntityIcon>. */
             <EntityIcon
               icon={{
                 name: displayAnnouncement.icon_name || 'openframe-logo',
@@ -217,72 +207,74 @@ export function AnnouncementBar({
                 props: displayAnnouncement.icon_props,
               }}
               size={24}
-              className="relative shrink-0 w-5 h-5 md:w-6 md:h-6"
+              // `!` is required: logo glyphs (LogoOpenframeIcon / sizedLogo in
+              // icon-library) drive their size via an inline style, which beats
+              // a plain class — author !important beats the inline style, so
+              // the responsive token (16px < md, 24px from md) wins everywhere.
+              className="relative !size-[var(--icon-size-icon-size)] shrink-0"
             />
-
-            {/* Single-line message: bold title + regular description inline,
-                truncating as one unit. Separator is a middot (house rule: no
-                en/em dashes in copy). */}
-            <p className="flex-1 min-w-0 max-w-full text-h6 truncate mb-0">
-              <span className="font-semibold">{displayAnnouncement.title}</span>
+          }
+          title={
+            /* Single-line message: title + description inline, truncating as
+               one unit. Type per the ODS mockup (2862-8391): the "h3 body @
+               500" Figma style maps to the code's `.text-h4` utility (the
+               `.text-h3` utility is 700; h3/h4 body share the same size
+               tokens) — the same treatment string titles get from the view.
+               Description keeps opacity-80 for hierarchy. Separator is a
+               middot (house rule: no en/em dashes in copy). */
+            <p className="min-w-0 max-w-full text-h4 truncate mb-0">
+              <span>{displayAnnouncement.title}</span>
               {displayAnnouncement.description && (
                 <span className="hidden sm:inline opacity-80"> · {displayAnnouncement.description}</span>
               )}
             </p>
+          }
+          actionBlock={
+            /* CTA - the common Button carrying the ADMIN-CONFIGURED colors
+               (cta_button_background_color / cta_button_text_color are an
+               admin FEATURE, defaults from ANNOUNCEMENT_CTA_DEFAULTS —
+               announcement colors are data, not token surfaces). Inline
+               styles win over the variant's hover classes on every state,
+               so hover feedback is opacity (the bar's original treatment);
+               nothing can render dark-on-dark.
 
-            {/* CTA - the common Button carrying the ADMIN-CONFIGURED colors
-                (cta_button_background_color / cta_button_text_color are an
-                admin FEATURE, defaults from ANNOUNCEMENT_CTA_DEFAULTS —
-                announcement colors are data, not token surfaces). Inline
-                styles win over the variant's hover classes on every state,
-                so hover feedback is opacity (the bar's original treatment);
-                nothing can render dark-on-dark. Hidden on mobile, where the
-                whole bar is the tap target.
-
-                Geometry + type come from the design system's size="compact"
-                (24px caption-scale pill for slim strips — rationale documented
-                on the variant in button.tsx). */}
-            {hasCta && displayAnnouncement.cta_text && (
-              <div className="hidden md:flex flex-shrink-0 ml-2 md:ml-4">
-                <Button
-                  onClick={handleCtaClick}
-                  variant="outline"
-                  size="compact"
-                  className="transition-opacity hover:opacity-90"
-                  style={{
-                    backgroundColor: displayAnnouncement.cta_button_background_color || ANNOUNCEMENT_CTA_DEFAULTS.background,
-                    color: displayAnnouncement.cta_button_text_color || ANNOUNCEMENT_CTA_DEFAULTS.text,
-                    borderColor: displayAnnouncement.cta_button_background_color || ANNOUNCEMENT_CTA_DEFAULTS.background,
-                  }}
-                  tabIndex={expanded ? 0 : -1}
-                  leftIcon={
-                    displayAnnouncement.cta_show_icon && displayAnnouncement.cta_icon_name
-                      ? (
-                          <EntityIcon
-                            icon={{ name: displayAnnouncement.cta_icon_name, props: displayAnnouncement.cta_icon_props }}
-                            size={14}
-                            className="w-3.5 h-3.5"
-                          />
-                        )
-                      : undefined
-                  }
-                >
-                  {displayAnnouncement.cta_text}
-                </Button>
-              </div>
-            )}
-          </div>
-
-          {/* Dismiss - the common Button in its ghost-icon treatment
-              (size="icon-sm": 32px target, >= the 24px WCAG 2.5.8 AA floor,
-              16px glyph) with the bar's quiet tint hover. Inert in
-              previewMode. */}
-          <div className="flex-shrink-0 ml-1 md:ml-2 mr-2 md:mr-4">
+               Geometry + type come from the design system's size="compact"
+               (24px caption-scale pill for slim strips — rationale documented
+               on the variant in button.tsx). */
+            hasCta && displayAnnouncement.cta_text ? (
+              <Button
+                onClick={handleCtaClick}
+                variant="outline"
+                size="compact"
+                className="transition-opacity hover:opacity-90"
+                style={{
+                  backgroundColor:
+                    displayAnnouncement.cta_button_background_color || ANNOUNCEMENT_CTA_DEFAULTS.background,
+                  color: displayAnnouncement.cta_button_text_color || ANNOUNCEMENT_CTA_DEFAULTS.text,
+                  borderColor: displayAnnouncement.cta_button_background_color || ANNOUNCEMENT_CTA_DEFAULTS.background,
+                }}
+                tabIndex={expanded ? 0 : -1}
+                leftIcon={
+                  displayAnnouncement.cta_show_icon && displayAnnouncement.cta_icon_name ? (
+                    <EntityIcon
+                      icon={{ name: displayAnnouncement.cta_icon_name, props: displayAnnouncement.cta_icon_props }}
+                      size={14}
+                      className="w-3.5 h-3.5"
+                    />
+                  ) : undefined
+                }
+              >
+                {displayAnnouncement.cta_text}
+              </Button>
+            ) : undefined
+          }
+          endAdornment={
+            /* Dismiss - the common Button in its ghost-icon treatment
+               (size="icon-sm": 32px target, >= the 24px WCAG 2.5.8 AA floor,
+               16px glyph) with the bar's quiet tint hover. Inert in
+               previewMode. */
             <Button
-              onClick={(e) => {
-                e.stopPropagation(); // Prevent triggering the mobile CTA click
-                handleDismiss();
-              }}
+              onClick={handleDismiss}
               variant="transparent"
               size="icon-sm"
               className={barButtonClasses}
@@ -292,8 +284,8 @@ export function AnnouncementBar({
             >
               <X strokeWidth={2} />
             </Button>
-          </div>
-        </div>
+          }
+        />
       </div>
     </div>
   );

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

@@ -4,6 +4,7 @@ import * as React from 'react'
 import { ChatFooter } from './chat-container'
 import { ChatInput } from './chat-input'
 import { ChatAttachmentAddButton } from './chat-attachment-bar'
+import { ChatContextMemoryBar } from './chat-context-memory-bar'
 import {
   ChatComposerPlusMenu,
   ChatContextChipStrip,
@@ -11,6 +12,7 @@ import {
 } from './chat-context-picker'
 import { ModelDisplay } from './model-display'
 import { BoxArchiveIcon } from '../icons-v2-generated'
+import { cn } from '../../utils/cn'
 import type { ChatInputRef, ModelDisplayProps } from './types/component.types'
 import type {
   ChatContextItem,
@@ -49,6 +51,13 @@ export interface ChatComposerProps {
   onToggleContextItem?: (item: ChatContextItem) => void
   /** Remove an item (chip ×). */
   onRemoveContextItem?: (item: ChatContextItem) => void
+  /** Ambient CONTEXT MEMORY (Figma 271:38656) — the entities the host collected
+   *  from the user's navigation history and sends with every message. Rendered
+   *  as a summary strip at the top of the composer card, above the assigned-item
+   *  chips. Empty/omitted → no strip. */
+  contextMemoryItems?: ChatContextItem[]
+  /** Drop one entity from the context memory (dropdown row ×). */
+  onRemoveContextMemoryItem?: (item: ChatContextItem) => void
   /** Controlled picker open state. */
   contextPickerOpen?: boolean
   /** Open the picker (the `+` menu's "Assign Item"). */
@@ -94,6 +103,8 @@ export function ChatComposer({
   selectedContextItems,
   onToggleContextItem,
   onRemoveContextItem,
+  contextMemoryItems,
+  onRemoveContextMemoryItem,
   contextPickerOpen = false,
   onOpenContextPicker,
   onCloseContextPicker,
@@ -104,6 +115,7 @@ export function ChatComposer({
 }: ChatComposerProps) {
   const contextEnabled = !!contextPicker && !archived
   const selected = selectedContextItems ?? []
+  const memory = contextMemoryItems ?? []
 
   // type → icon lookup so the chips (composer + bubble) lead with their
   // entity-type glyph without the parent threading an extra resolver. Keyed on
@@ -184,23 +196,38 @@ export function ChatComposer({
               </p>
             </div>
           ) : contextEnabled ? (
-            // Unified card (Figma 1:6073): a context-chip header strip
-            // (`bg-ods-bg`, `border-b`) sits flush above the input; the card
-            // owns the border / radius / focus ring. No `overflow-hidden` so the
-            // picker popover can float above the input (chips get `rounded-t`).
+            // Unified card (Figma 1:6073 / 271:38656): the context-memory
+            // summary strip and the assigned-chip strip (both `bg-ods-bg`,
+            // `border-b`) stack flush above the input; the card owns the border
+            // / radius / focus ring. No `overflow-hidden` so the picker and the
+            // memory popover can float above the input (whichever strip comes
+            // first gets `rounded-t`).
             // `has-[[data-editor]:focus]` (not `focus-within`) so the accent
             // border reacts ONLY to the composer editor — not the picker's search
             // input or item buttons, which also live inside this card. The editor
             // is a `contentEditable` div (`data-editor`), not a `<textarea>`, so we
             // target its data attribute rather than the element name.
             <div className="rounded-md border border-ods-border bg-ods-card transition-colors has-[[data-editor]:focus]:border-ods-accent">
+              {/* Ambient navigation-history context — always the same items, so
+                  it sits furthest from the textarea. Self-hides when empty. */}
+              <ChatContextMemoryBar
+                items={memory}
+                onRemove={onRemoveContextMemoryItem}
+                resolveIcon={resolveContextIcon}
+                disabled={sending}
+                className="rounded-t-md"
+              />
               {selected.length > 0 && (
                 <ChatContextChipStrip
                   items={selected}
                   onRemove={onRemoveContextItem}
                   resolveIcon={resolveContextIcon}
                   disabled={sending}
-                  className="rounded-t-md border-b border-ods-border bg-ods-bg p-2"
+                  className={cn(
+                    'border-b border-ods-border bg-ods-bg p-2',
+                    // Only the TOP strip rounds into the card corner.
+                    memory.length === 0 && 'rounded-t-md',
+                  )}
                 />
               )}
               {/* Picker is rendered inside the `+` button (its `dropdown` prop)

package/src/components/chat/chat-context-memory-bar.tsx

@@ -0,0 +1,159 @@
+'use client'
+
+/**
+ * `<ChatContextMemoryBar>` — the composer's CONTEXT MEMORY strip
+ * (Figma node 271:38656).
+ *
+ * A one-line summary row pinned to the top of the composer card ("5 recently
+ * viewed items in context") with a `⋯` trigger that opens a dropdown listing
+ * every remembered entity, each removable via its `×`.
+ *
+ * This is the AMBIENT half of the composer's context UI — the entities the host
+ * accumulated from the user's navigation history and sends along with every
+ * message — as opposed to `<ChatContextChipStrip>`, which shows the items the
+ * user ASSIGNED to the message they're typing. Both sit above the input; memory
+ * on top (passive, always the same items), assigned chips closest to the
+ * textarea (active selection for this message).
+ *
+ * The lib owns only the chrome: items and removal are host-fed
+ * (`EmbeddableChat`'s `contextMemory` prop), and lead glyphs come from the
+ * picker's entity-type icon map via `resolveIcon`. Renders `null` when the host
+ * has nothing remembered, so it has no permanent footprint.
+ */
+
+import type * as React from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { Ellipsis01Icon } from '../icons-v2-generated/interface/ellipsis-01-icon'
+import { XmarkCircleIcon } from '../icons-v2-generated/signs-and-symbols/xmark-circle-icon'
+import { cn } from '../../utils/cn'
+import { CONTEXT_ICON_CLASS, CONTEXT_LABEL_CLASS, CONTEXT_ROW_CLASS } from './context-items-list'
+import type { ChatContextItem } from './types/context-item.types'
+
+const itemKey = (item: { type: string; id: string }) => `${item.type}:${item.id}`
+
+export interface ChatContextMemoryBarProps {
+  /** Remembered entities, most-recent-first. Empty → the bar renders nothing. */
+  items: ChatContextItem[]
+  /** Drop one entity from the host's memory (dropdown row `×`). When omitted the
+   *  list is read-only. */
+  onRemove?: (item: ChatContextItem) => void
+  /** Lead-glyph resolver — the composer passes its entity-type icon map, so the
+   *  rows match the picker and the assigned chips. */
+  resolveIcon?: (item: ChatContextItem) => React.ReactNode
+  /** External disable (e.g. while a message is streaming). */
+  disabled?: boolean
+  className?: string
+}
+
+export function ChatContextMemoryBar({
+  items,
+  onRemove,
+  resolveIcon,
+  disabled = false,
+  className,
+}: ChatContextMemoryBarProps) {
+  const [open, setOpen] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  // Removing the last remembered entity unmounts the bar; close first so a
+  // stale popover can't outlive its trigger.
+  useEffect(() => {
+    if (items.length === 0) setOpen(false)
+  }, [items.length])
+
+  // Outside-press close. Registered only while open. The root wraps BOTH the
+  // trigger and the popover, so a press on the `⋯` (inside root) is ignored here
+  // and handled by the button's own toggle.
+  //
+  // CAPTURE phase (the `true` 3rd arg): the chat lives inside a resizable drawer
+  // whose panel captures pointer events and whose composer sits on a
+  // `contentEditable`; a bubble-phase `document` listener can be pre-empted by
+  // an ancestor's `stopPropagation`, which is why a press outside the popover
+  // wasn't closing it. Capture runs top-down before any of that, so the handler
+  // always fires. `touchstart` covers tap-to-dismiss on touch devices.
+  useEffect(() => {
+    if (!open) return
+    const onOutside = (e: Event) => {
+      if (rootRef.current?.contains(e.target as Node)) return
+      setOpen(false)
+    }
+    document.addEventListener('mousedown', onOutside, true)
+    document.addEventListener('touchstart', onOutside, true)
+    return () => {
+      document.removeEventListener('mousedown', onOutside, true)
+      document.removeEventListener('touchstart', onOutside, true)
+    }
+  }, [open])
+
+  if (items.length === 0) return null
+
+  return (
+    // `relative` anchors the popover to this strip; `bottom-full` floats it
+    // above, matching the context picker's placement over the input.
+    <div
+      ref={rootRef}
+      className={cn(
+        'relative flex items-center gap-[var(--spacing-system-xs)] border-b border-ods-border bg-ods-bg p-[var(--spacing-system-xs)]',
+        className,
+      )}
+      onKeyDown={e => {
+        if (e.key === 'Escape' && open) {
+          e.preventDefault()
+          setOpen(false)
+        }
+      }}
+    >
+      <p className="min-w-0 flex-1 truncate text-h6 text-ods-text-secondary">
+        {items.length} recently viewed {items.length === 1 ? 'item' : 'items'} in context
+      </p>
+
+      <button
+        type="button"
+        aria-label="Show remembered context"
+        aria-expanded={open}
+        title="Show remembered context"
+        onClick={() => setOpen(o => !o)}
+        className={cn(
+          'flex size-4 shrink-0 items-center justify-center rounded outline-none transition-colors [&_svg]:size-4',
+          open ? 'text-ods-text-primary' : 'text-ods-text-secondary hover:text-ods-text-primary',
+          'focus-visible:text-ods-text-primary',
+        )}
+      >
+        <Ellipsis01Icon size={16} />
+      </button>
+
+      {open && (
+        <div
+          role="list"
+          aria-label="Remembered context"
+          // Mirrors `ChatContextPicker`'s popover chrome (border / card bg /
+          // shadow-md) and its scroll cap, so both dropdowns over the composer
+          // read as one component family.
+          className="absolute bottom-full right-0 z-50 mb-1 max-h-[min(340px,45vh)] w-[320px] max-w-[90vw] overflow-y-auto overscroll-contain rounded-md border border-ods-border bg-ods-card text-ods-text-primary shadow-md"
+        >
+          {items.map(item => (
+            // Not a `<button>`: the row itself is inert (only the `×` acts), so
+            // the remove control isn't nested inside another button.
+            <div key={itemKey(item)} role="listitem" className={CONTEXT_ROW_CLASS}>
+              {resolveIcon && <span className={CONTEXT_ICON_CLASS}>{resolveIcon(item)}</span>}
+              <span className={CONTEXT_LABEL_CLASS} title={item.label}>
+                {item.label}
+              </span>
+              {onRemove && (
+                <button
+                  type="button"
+                  onClick={() => onRemove(item)}
+                  disabled={disabled}
+                  aria-label={`Remove ${item.label} from context`}
+                  className="flex size-4 shrink-0 items-center justify-center text-ods-text-secondary outline-none transition-colors hover:text-ods-text-primary focus-visible:text-ods-text-primary disabled:cursor-not-allowed disabled:opacity-40 md:size-6"
+                >
+                  <XmarkCircleIcon className="size-4 shrink-0 md:size-6" />
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -379,13 +379,21 @@ export interface EmbeddableChatProps {
    */
   onGuidePromptConsumed?: () => void
   /**
-   * Host-rendered banner shown as a full-bleed row directly under the panel
-   * header in MINGO mode only (Figma 192:51006) — e.g. a "current page context"
-   * tag naming the entity whose detail page the user is viewing. The host owns
-   * the data + click; pass `null`/return `null` to render nothing. Mirrors the
-   * built-in `GuideModeBanner`, which fills the same slot in Guide mode.
+   * CONTEXT MEMORY (Figma 271:38656) — the entities the host collected from the
+   * user's navigation history and rides out on every message. Rendered as a
+   * summary strip at the top of the composer card ("N recently viewed items in
+   * context") with a `⋯` dropdown listing them all, each removable via
+   * `onRemove`. Replaces the old under-the-header "current page context" banner.
+   *
+   * Host-owned data (it lives in the host's navigation store); the lib only
+   * places and styles it, resolving lead glyphs from `contextPicker.entityTypes`.
+   * Shown only alongside an active `contextPicker` (i.e. Mingo mode); an empty
+   * `items` array renders nothing. Keep the object identity stable (`useMemo`).
    */
-  mingoContextBanner?: React.ReactNode
+  contextMemory?: {
+    items: ChatContextItem[]
+    onRemove?: (item: ChatContextItem) => void
+  }
 }
 
 // =============================================================================
@@ -918,7 +926,7 @@ function EmbeddableChatInner({
   renderContextItem,
   guidePendingPrompt,
   onGuidePromptConsumed,
-  mingoContextBanner,
+  contextMemory,
 }: EmbeddableChatProps) {
   // `shell === 'none'` means the consumer hosts us inside their own panel
   // (e.g. AppLayoutDrawer in openframe-frontend). Several drawer-shell
@@ -2197,14 +2205,6 @@ function EmbeddableChatInner({
                 <GuideModeBanner className="animate-in fade-in-0 duration-200" />
               )}
 
-              {/* Mingo-mode current-page context banner (Figma 192:51006) —
-                  full-bleed row under the header naming the entity whose detail
-                  page the user is currently viewing, so they can ask Mingo to
-                  recall it. Host-rendered (it reads the host's navigation-context
-                  store) and host-gated to "has an open view"; this slot just
-                  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
@@ -2532,6 +2532,8 @@ function EmbeddableChatInner({
                 selectedContextItems={contextItems}
                 onToggleContextItem={toggleContextItem}
                 onRemoveContextItem={removeContextItem}
+                contextMemoryItems={contextMemory?.items}
+                onRemoveContextMemoryItem={contextMemory?.onRemove}
                 contextPickerOpen={contextPickerOpen}
                 onOpenContextPicker={openContextPicker}
                 onCloseContextPicker={closeContextPicker}

package/src/components/chat/index.ts

@@ -37,6 +37,7 @@ export * from './chat-header-search-field'
 export * from './chat-panel-header'
 export * from './chat-composer'
 export * from './chat-context-picker'
+export * from './chat-context-memory-bar'
 export * from './context-items-list'
 export * from './chat-archive-page'
 export * from './model-display'