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

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

@@ -379,21 +379,13 @@ export interface EmbeddableChatProps {
    */
   onGuidePromptConsumed?: () => void
   /**
-   * 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`).
+   * 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.
    */
-  contextMemory?: {
-    items: ChatContextItem[]
-    onRemove?: (item: ChatContextItem) => void
-  }
+  mingoContextBanner?: React.ReactNode
 }
 
 // =============================================================================
@@ -926,7 +918,7 @@ function EmbeddableChatInner({
   renderContextItem,
   guidePendingPrompt,
   onGuidePromptConsumed,
-  contextMemory,
+  mingoContextBanner,
 }: EmbeddableChatProps) {
   // `shell === 'none'` means the consumer hosts us inside their own panel
   // (e.g. AppLayoutDrawer in openframe-frontend). Several drawer-shell
@@ -2205,6 +2197,14 @@ 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,8 +2532,6 @@ 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,7 +37,6 @@ 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'

package/src/components/ui/tab-selector.tsx

@@ -46,15 +46,15 @@ export function TabSelector({
 }: TabSelectorProps) {
   return (
     <div
-      className={cn('flex flex-col gap-[var(--spacing-system-xxs)]', disabled && 'opacity-50', className)}
+      className={cn('flex flex-col gap-1', disabled && 'opacity-50', className)}
       aria-disabled={disabled || undefined}
     >
       {label && (
-        <p className="text-ods-text-primary text-h4">
+        <p className="text-ods-text-primary text-h3">
           {label}
         </p>
       )}
-      <div className="flex w-full bg-ods-bg border border-ods-border rounded-md p-[var(--spacing-system-xxs)] gap-[var(--spacing-system-xxs)] h-11 md:h-12">
+      <div className="flex w-full bg-ods-bg border border-ods-border rounded-md p-1 gap-1 h-12">
         {items.map((item) => {
           const isActive = value === item.id
           const isDisabled = disabled || item.disabled
@@ -67,10 +67,10 @@ export function TabSelector({
               onClick={() => onValueChange(item.id)}
               aria-label={!item.label ? item.ariaLabel : undefined}
               className={cn(
-                // Bold on BOTH states (text-h3 = DM Sans bold) — a medium↔bold
-                // flip between the active and inactive tabs read as inconsistent
-                // weight (and nudged label widths on every switch).
-                'flex flex-1 items-center justify-center gap-[var(--spacing-system-xs)] rounded-xs p-[var(--spacing-system-xsf)] text-h4 transition-colors duration-200 whitespace-nowrap',
+                // Bold on BOTH states — a medium↔bold flip between the active
+                // and inactive tabs read as inconsistent weight (and nudged
+                // label widths on every switch).
+                'flex flex-1 items-center justify-center gap-2 rounded-xs p-2 text-h4 font-bold transition-colors duration-200 whitespace-nowrap',
                 isDisabled
                   ? isActive
                     ? 'cursor-not-allowed bg-ods-bg-surface text-ods-text-secondary'
@@ -83,7 +83,7 @@ export function TabSelector({
               )}
             >
               {item.icon && (
-                <span className="shrink-0 size-4 md:size-6 flex items-center justify-center">
+                <span className="shrink-0 size-6 flex items-center justify-center">
                   {item.icon}
                 </span>
               )}