@flamingo-stack/openframe-frontend-core 0.0.319 → 0.0.321-snapshot.20260625085235

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

@@ -25,7 +25,7 @@ import type { MessageSegment, MessageContent, ChatMessageEnhancedProps } from ".
  *  item would be stripped from the chip strip yet never rendered inline — lost
  *  from display entirely. The id is capture group 2 (group 1 is the boundary).
  *  Marker lowercase; id is the mention-token charset. */
-const MENTION_MARKER_REGEX = /(^|\s)@[a-z]+:([A-Za-z0-9_.+/=-]+)/g
+const MENTION_MARKER_REGEX = /(^|[^\w@])@[a-z]+:([A-Za-z0-9_.+/=-]*[A-Za-z0-9_+/=])/g
 
 /**
  * Same regex shape as `remarkCardLinks` — kept in lockstep so the
@@ -43,7 +43,7 @@ function normalizeContent(content: MessageContent): MessageSegment[] {
 }
 
 const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>(
-  ({ className, role, content, name, avatar, isTyping = false, timestamp, showAvatar = true, assistantType, authorType: authorTypeProp, assistantIcon, chatRefs, contextItems, resolveContextIcon, renderMention, renderEntityCard, NavLinkAnchor, ...props }, ref) => {
+  ({ className, role, content, name, avatar, isTyping = false, timestamp, showAvatar = true, assistantType, authorType: authorTypeProp, assistantIcon, chatRefs, contextItems, resolveContextIcon, renderContextItem, renderMention, renderEntityCard, NavLinkAnchor, ...props }, ref) => {
     const isUser = role === 'user'
     const isError = role === 'error'
     const authorType = authorTypeProp ?? (isUser ? 'user' : assistantType === 'mingo' ? 'mingo' : 'fae')
@@ -595,6 +595,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
             <ChatContextChipStrip
               items={stripContextItems}
               resolveIcon={resolveContextIcon}
+              renderItem={renderContextItem}
               className="mt-2"
             />
           )}
@@ -628,6 +629,7 @@ const MemoizedChatMessageEnhanced = memo(ChatMessageEnhanced, (prevProps, nextPr
     // message (it's set once on the optimistic send and never mutated).
     prevProps.contextItems === nextProps.contextItems &&
     prevProps.resolveContextIcon === nextProps.resolveContextIcon &&
+    prevProps.renderContextItem === nextProps.renderContextItem &&
     // Host keeps this stable (module const / useCallback), so reference
     // equality holds across streaming chunks.
     prevProps.renderMention === nextProps.renderMention &&

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

@@ -107,6 +107,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
       onLoadMore,
       renderEntityCard,
       resolveContextIcon,
+      renderContextItem,
       renderMention,
       NavLinkAnchor,
       ...props
@@ -539,6 +540,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
                   chatRefs={message.chatRefs}
                   contextItems={message.contextItems}
                   resolveContextIcon={resolveContextIcon}
+                  renderContextItem={renderContextItem}
                   renderMention={renderMention}
                   renderEntityCard={renderEntityCard}
                   NavLinkAnchor={NavLinkAnchor}

package/src/components/chat/context-items-list.tsx

@@ -141,7 +141,15 @@ export function ContextItemsList({
   }
 
   return (
-    <div role="listbox" aria-label="Items" onScroll={onScroll} className={cn('max-h-[340px] overflow-y-auto', className)}>
+    <div
+      role="listbox"
+      aria-label="Items"
+      onScroll={onScroll}
+      // Cap to 340px but never exceed ~half the viewport, so on short screens the
+      // results list (inside the bottom-anchored picker popover) still fits and
+      // scrolls instead of overflowing past the top edge.
+      className={cn('max-h-[min(340px,45vh)] overflow-y-auto', className)}
+    >
       {items.map(item => {
         const selected = selectedKeys.has(itemKey(item))
         return (

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

@@ -196,6 +196,8 @@ export interface EmbeddableChatProps {
       params: FetchDialogsParams,
     ) => Promise<FetchDialogsResult>
     unarchiveDialog?: (id: string) => Promise<void>
+    searchQuery?: string
+    onSearchChange?: (query: string) => void
   }
 
   /**
@@ -271,6 +273,16 @@ export interface EmbeddableChatProps {
    * marker the host can't render → the lib falls back to the bare token.
    */
   renderMention?: (reference: { marker: string; id: string }) => React.ReactNode
+  /**
+   * Host renderer that REPLACES the default label-only context chip on a sent
+   * user bubble with a self-fetching entity chip — so a user's manually
+   * attached context (`contextItems`) renders IDENTICALLY to an inline
+   * `@marker:id` mention (same live name resolution + link). Mirror of
+   * `renderMention`, for the attached-chip strip instead of inline tokens.
+   * Return null for an item the host can't render → the lib falls back to the
+   * label pill. Keep the identity stable (module const / `useCallback`).
+   */
+  renderContextItem?: (item: ChatContextItem) => React.ReactNode
 }
 
 // =============================================================================
@@ -691,6 +703,7 @@ function EmbeddableChatInner({
   guideWelcome,
   contextPicker,
   renderMention,
+  renderContextItem,
 }: EmbeddableChatProps) {
   // `shell === 'none'` means the consumer hosts us inside their own panel
   // (e.g. AppLayoutDrawer in openframe-frontend). Several drawer-shell
@@ -844,6 +857,8 @@ function EmbeddableChatInner({
         canArchive: mingoDialogCapabilities?.canArchive ?? false,
         fetchArchivedDialogs: mingoDialogCapabilities?.fetchArchivedDialogs,
         unarchiveDialog: mingoDialogCapabilities?.unarchiveDialog,
+        searchQuery: mingoDialogCapabilities?.searchQuery,
+        onSearchChange: mingoDialogCapabilities?.onSearchChange,
       }
     }
     return {
@@ -851,6 +866,8 @@ function EmbeddableChatInner({
       canArchive: !!effectiveModes.mingo?.archiveDialog,
       fetchArchivedDialogs: effectiveModes.mingo?.fetchArchivedDialogs,
       unarchiveDialog: effectiveModes.mingo?.unarchiveDialog,
+      searchQuery: undefined as string | undefined,
+      onSearchChange: undefined as ((query: string) => void) | undefined,
     }
   }, [mingoState, mingoDialogCapabilities, effectiveModes])
 
@@ -986,9 +1003,10 @@ function EmbeddableChatInner({
   useEffect(() => {
     mentionActiveRef.current = mentionQuery !== null
   }, [mentionQuery])
-  // The one mention reference currently in the draft (`"<type>:<id>"`), or null.
-  // Source of truth = the input text: deleting the `@type:id` token drops it.
-  const mentionKeyRef = useRef<string | null>(null)
+  // Keys (`"<type>:<id>"`) of context items that were committed via `@` and so
+  // have a `@type:id` token in the draft text. MULTI-mention: several coexist.
+  // Source of truth = the input text — deleting a token's chip drops its item.
+  const mentionKeysRef = useRef<Set<string>>(new Set())
 
   // Staged picker selection is per-conversation and Mingo-only. Clear it (and the
   // mention bookkeeping) whenever the active dialog changes or the mode toggles,
@@ -998,7 +1016,7 @@ function EmbeddableChatInner({
   useEffect(() => {
     setContextItems([])
     setMentionQuery(null)
-    mentionKeyRef.current = null
+    mentionKeysRef.current.clear()
   }, [activeDialogId, activeMode])
 
   // Map each entity type to its backend mention marker (host-declared on the
@@ -1010,35 +1028,35 @@ function EmbeddableChatInner({
     return m
   }, [contextPicker?.entityTypes])
 
+  // Stable type → icon resolver (entity-type glyph). Used both for the inline
+  // composer chips (`commitMention` meta) and the message-bubble context chips.
+  // Keyed on `entityTypes` only so an inline `contextPicker={{…}}` doesn't
+  // rebuild it every render (its identity flows into the message memo).
+  const contextEntityTypes = contextPicker?.entityTypes
+  const resolveContextIcon = useMemo(() => {
+    const byType = new Map<string, React.ReactNode>()
+    for (const t of contextEntityTypes ?? []) byType.set(t.type, t.icon)
+    return (item: ChatContextItem) => byType.get(item.type)
+  }, [contextEntityTypes])
+
   const toggleContextItem = useCallback(
     (item: ChatContextItem) => {
       const key = `${item.type}:${item.id}`
-      // `@`-mention flow → SINGLE-SELECT: commit `@type:id` into the draft
-      // (which also strips any prior mention token) so the picked entity stays
-      // visible in the input AND rides out in the context. Exactly one mention
-      // item is kept. The `+` flow (mention inactive) stays multi-select.
+      // `@`-mention flow → MULTI-select: commit a `@type:id` chip into the draft
+      // (prior mentions left in place) so each picked entity stays visible inline
+      // AND rides out in the context. The `+` flow (mention inactive) is the same
+      // multi-select on the chip strip.
       if (mentionActiveRef.current) {
-        // Single-select replaces any prior mention item and dedupes, so it only
-        // grows the selection when adding a brand-new item with no prior mention
-        // to swap out. Honour `maxItems` in that one growth case (parity with
-        // the `+` branch) so the `@` flow can't push past the cap — and don't
-        // commit the `@type:id` token into the draft if we're going to ignore it.
-        const alreadySelected = contextItems.some(
-          (p) => `${p.type}:${p.id}` === key,
-        )
-        const grows = !alreadySelected && !mentionKeyRef.current
-        if (grows && contextItems.length >= contextMaxItems) return
-        chatInputRef.current?.commitMention(mentionTokenOf(key, mentionMarkerByType))
-        setContextItems((prev) => {
-          const withoutPrevMention = mentionKeyRef.current
-            ? prev.filter((p) => `${p.type}:${p.id}` !== mentionKeyRef.current)
-            : prev
-          const deduped = withoutPrevMention.filter(
-            (p) => `${p.type}:${p.id}` !== key,
-          )
-          return [...deduped, item]
+        // Already attached → no-op (the picker's `@` flow is add-then-close; the
+        // chip already lives in the draft). Honour `maxItems` on growth.
+        if (contextItems.some((p) => `${p.type}:${p.id}` === key)) return
+        if (contextItems.length >= contextMaxItems) return
+        chatInputRef.current?.commitMention(mentionTokenOf(key, mentionMarkerByType), {
+          label: item.label,
+          icon: resolveContextIcon(item),
         })
-        mentionKeyRef.current = key
+        setContextItems((prev) => [...prev, item])
+        mentionKeysRef.current.add(key)
         return
       }
       setContextItems((prev) => {
@@ -1048,32 +1066,32 @@ function EmbeddableChatInner({
         return [...prev, item]
       })
     },
-    [contextMaxItems, contextItems, mentionMarkerByType],
+    [contextMaxItems, contextItems, mentionMarkerByType, resolveContextIcon],
   )
 
   const removeContextItem = useCallback((item: ChatContextItem) => {
     const key = `${item.type}:${item.id}`
     setContextItems((prev) => prev.filter((p) => `${p.type}:${p.id}` !== key))
-    // Removing the mention chip must also strip its `@type:id` token from the
-    // draft, keeping text and context in lockstep (the inverse of deleting the
-    // token text, which drops the chip via `handleContextValueChange`).
-    if (mentionKeyRef.current === key) {
-      mentionKeyRef.current = null
+    // Removing a mention-backed chip must also strip its `@type:id` token from
+    // the draft, keeping text and context in lockstep (the inverse of deleting
+    // the chip in the input, which drops the item via `handleContextValueChange`).
+    if (mentionKeysRef.current.has(key)) {
+      mentionKeysRef.current.delete(key)
       const cur = chatInputRef.current?.getValue() ?? ''
       const next = cur.replace(`@${mentionTokenOf(key, mentionMarkerByType)}`, '').replace(/\s{2,}/g, ' ').trimStart()
       chatInputRef.current?.setValue(next)
     }
   }, [mentionMarkerByType])
 
-  // Draft → context reconciliation: when the user deletes the `@type:id` token
-  // text, drop the matching mention item. `+`-added items have no token in the
-  // text and are never touched here.
+  // Draft → context reconciliation: when the user deletes a `@type:id` chip from
+  // the input, drop the matching mention item. Checks EVERY token-backed key
+  // (multi-mention). `+`-added items have no token in the text and are untouched.
   const handleContextValueChange = useCallback((value: string) => {
-    const key = mentionKeyRef.current
-    if (!key) return
-    if (!value.includes(`@${mentionTokenOf(key, mentionMarkerByType)}`)) {
-      setContextItems((prev) => prev.filter((p) => `${p.type}:${p.id}` !== key))
-      mentionKeyRef.current = null
+    for (const key of Array.from(mentionKeysRef.current)) {
+      if (!value.includes(`@${mentionTokenOf(key, mentionMarkerByType)}`)) {
+        mentionKeysRef.current.delete(key)
+        setContextItems((prev) => prev.filter((p) => `${p.type}:${p.id}` !== key))
+      }
     }
   }, [mentionMarkerByType])
 
@@ -1102,20 +1120,6 @@ function EmbeddableChatInner({
     setContextPickerOpen(query !== null)
   }, [])
 
-  // Stable type → icon resolver for the message-bubble context chips. Built
-  // from the host's `contextPicker.entityTypes`; null-safe when the feature
-  // is off. Keyed on `entityTypes` (NOT the whole `contextPicker` object) so an
-  // inline `contextPicker={{…}}` on the host doesn't rebuild this resolver every
-  // render — that identity flows into the `ChatMessageEnhanced` memo, and a new
-  // function each render would force a full markdown re-render of every message
-  // on each keystroke.
-  const contextEntityTypes = contextPicker?.entityTypes
-  const resolveContextIcon = useMemo(() => {
-    const byType = new Map<string, React.ReactNode>()
-    for (const t of contextEntityTypes ?? []) byType.set(t.type, t.icon)
-    return (item: ChatContextItem) => byType.get(item.type)
-  }, [contextEntityTypes])
-
   // `renderMention` is HOST-provided (see the prop doc): the per-type renderer
   // for inline AI mentions `@marker:id` (mirror of `renderEntityCard`). The lib
   // forwards it verbatim to the message list and calls it from the `mention://`
@@ -1580,6 +1584,7 @@ function EmbeddableChatInner({
                       assistantIcon={mingoAssistantIcon}
                       renderEntityCard={renderEntityCard}
                       resolveContextIcon={resolveContextIcon}
+                      renderContextItem={renderContextItem}
                       renderMention={renderMention}
                       NavLinkAnchor={NavLinkAnchorViaRuntime}
                       className="flex-1"
@@ -1633,8 +1638,14 @@ function EmbeddableChatInner({
                     isLoadingHistory={dialogsInitialLoading}
                     loadError={dialogsLoadError}
                     onRetry={reloadDialogs}
+                    historySearchable={!!mingoCaps.onSearchChange}
                     dialogHistory={
-                      dialogs.length > 0 ? (
+                      // 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}
@@ -1644,6 +1655,8 @@ function EmbeddableChatInner({
                           onRequestArchive={
                             mingoCaps.canArchive ? setArchiveTarget : undefined
                           }
+                          searchQuery={mingoCaps.searchQuery}
+                          onSearchChange={mingoCaps.onSearchChange}
                           hasMore={hasMoreDialogs}
                           isLoadingMore={isDialogsLoading && dialogs.length > 0}
                           onLoadMore={() => {

package/src/components/chat/mingo-chat-history.tsx

@@ -2,9 +2,11 @@
 
 import * as React from 'react'
 import { cn } from '../../utils/cn'
+import { useDebounce } from '../../hooks/ui/use-debounce'
 import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu'
 import { Button } from '../ui/button'
-import { Ellipsis01Icon } from '../icons-v2-generated'
+import { Input } from '../ui/input'
+import { Ellipsis01Icon, SearchIcon } from '../icons-v2-generated'
 import type { DialogItem } from './types/component.types'
 
 // =============================================================================
@@ -24,6 +26,12 @@ export interface MingoChatHistoryProps {
   /** Request archive — enables the row "Archive chat" action. The host opens
    *  the Archive confirmation modal. */
   onRequestArchive?: (dialog: DialogItem) => void
+  /** Seed value for the search input. The host owns the search term and refetches
+   *  the dialog list server-side; the list itself does no filtering. */
+  searchQuery?: string
+  /** Emit the (debounced) search term — enables the dialog search bar above the
+   *  list. Omit to hide the search bar entirely. */
+  onSearchChange?: (query: string) => void
   /** Whether more dialogs remain (cursor pagination). */
   hasMore?: boolean
   /** True while the next page is loading. */
@@ -211,7 +219,15 @@ function MingoChatHistoryRow({
  * two layouts are mutually exclusive — swapping between them mid-load reads as
  * a flicker). Pure ODS tokens, `animate-pulse`.
  */
-export function MingoChatHistorySkeleton({ className }: { className?: string }) {
+export function MingoChatHistorySkeleton({
+  className,
+  searchable = false,
+}: {
+  className?: string
+  /** Render a search-bar placeholder above the groups — match the real list,
+   *  which shows the search bar only when search is wired. */
+  searchable?: boolean
+}) {
   // Mirror the real grouped list: a group label, then a bordered container of
   // `h-12` rows. `withBadge` adds the leading unread-badge square on the first
   // N rows; `widths` varies the title-bar length so the placeholder reads like
@@ -234,6 +250,15 @@ export function MingoChatHistorySkeleton({ className }: { className?: string })
         className,
       )}
     >
+      {/* Search-bar placeholder — mirrors the real `Input` (border, rounded,
+          h-11/12) with a leading icon + text bar so the loading state matches
+          the searchable layout. */}
+      {searchable && (
+        <div className="flex h-11 md:h-12 shrink-0 items-center gap-2 rounded-[6px] border border-ods-border bg-ods-card px-3">
+          <div className="size-4 md:size-6 shrink-0 animate-pulse rounded bg-ods-border" />
+          <div className="h-4 w-32 animate-pulse rounded bg-ods-border" />
+        </div>
+      )}
       {groups.map((group, g) => (
         <div key={g} className="flex shrink-0 flex-col gap-[var(--spacing-system-xxs)]">
           {/* Group label (Today / Yesterday). */}
@@ -261,6 +286,46 @@ export function MingoChatHistorySkeleton({ className }: { className?: string })
   )
 }
 
+// =============================================================================
+// Search bar
+// =============================================================================
+
+/**
+ * Dialog search field. Holds its own input text for snappy typing and emits 
+ * the DEBOUNCED term via `onSearchChange` — the host owns the search state 
+ * and refetches the dialog list server-side, so the list never
+ * filters locally. `initialValue` only seeds the field on mount.
+ */
+function DialogSearchBar({
+  initialValue,
+  onSearchChange,
+}: {
+  initialValue?: string
+  onSearchChange: (query: string) => void
+}) {
+  const [value, setValue] = React.useState(initialValue ?? '')
+  const debounced = useDebounce(value, 300)
+  const lastEmitted = React.useRef(initialValue ?? '')
+
+  React.useEffect(() => {
+    if (debounced === lastEmitted.current) return
+    lastEmitted.current = debounced
+    onSearchChange(debounced)
+  }, [debounced, onSearchChange])
+
+  return (
+    <Input
+      type="text"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      placeholder="Search for Chats"
+      aria-label="Search chats"
+      startAdornment={<SearchIcon />}
+      className="shrink-0"
+    />
+  )
+}
+
 // =============================================================================
 // Component
 // =============================================================================
@@ -282,12 +347,15 @@ export function MingoChatHistory({
   onSelectDialog,
   onRequestRename,
   onRequestArchive,
+  searchQuery,
+  onSearchChange,
   hasMore = false,
   isLoadingMore = false,
   onLoadMore,
   className,
 }: MingoChatHistoryProps) {
   const groups = React.useMemo(() => groupDialogs(dialogs), [dialogs])
+  const noSearchResults = groups.length === 0 && !!searchQuery?.trim()
 
   // Scroll-fade affordances (same pattern as MingoWelcome's greeting region).
   const scrollRef = React.useRef<HTMLDivElement>(null)
@@ -333,58 +401,73 @@ export function MingoChatHistory({
   }, [hasMore])
 
   return (
-    <div className={cn('relative flex flex-1 min-h-0 flex-col', className)}>
-      <div
-        ref={scrollRef}
-        onScroll={updateFade}
-        className="flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)] overflow-y-auto"
-      >
-        {groups.map((group) => (
-          <div
-            key={group.key}
-            className="flex flex-col gap-[var(--spacing-system-xxs)]"
-          >
-            <p className="text-h5 text-ods-text-secondary">{group.label}</p>
-            <div className="overflow-hidden rounded-md border border-ods-border">
-              {group.items.map((dialog) => (
-                <MingoChatHistoryRow
-                  key={dialog.id}
-                  dialog={dialog}
-                  isActive={dialog.id === activeDialogId}
-                  onSelect={onSelectDialog}
-                  onRequestRename={onRequestRename}
-                  onRequestArchive={onRequestArchive}
-                />
-              ))}
-            </div>
-          </div>
-        ))}
-        {hasMore ? <div ref={sentinelRef} className="h-px shrink-0" /> : null}
-      </div>
+    <div className={cn('relative flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)]', className)}>
+      {/* Pinned search bar — stays put while the grouped list scrolls below. */}
+      {onSearchChange ? (
+        <DialogSearchBar initialValue={searchQuery} onSearchChange={onSearchChange} />
+      ) : null}
 
-      {/* Scroll-fade — only while content is hidden in that direction. */}
-      <div
-        aria-hidden
-        className={cn(
-          'pointer-events-none absolute inset-x-0 top-0 h-12 transition-opacity duration-150',
-          fade.top ? 'opacity-100' : 'opacity-0',
-        )}
-        style={{
-          background:
-            'linear-gradient(0deg, transparent 0%, var(--color-bg-card) 100%)',
-        }}
-      />
-      <div
-        aria-hidden
-        className={cn(
-          'pointer-events-none absolute inset-x-0 bottom-0 h-12 transition-opacity duration-150',
-          fade.bottom ? 'opacity-100' : 'opacity-0',
-        )}
-        style={{
-          background:
-            'linear-gradient(180deg, transparent 0%, var(--color-bg-card) 100%)',
-        }}
-      />
+      {/* Scroll region — `relative` so the fades anchor here (below the search
+          bar), not over it. */}
+      <div className="relative flex flex-1 min-h-0 flex-col">
+        <div
+          ref={scrollRef}
+          onScroll={updateFade}
+          className="flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)] overflow-y-auto"
+        >
+          {noSearchResults ? (
+            <p className="py-[var(--spacing-system-m)] text-center text-h5 text-ods-text-secondary">
+              No chats found
+            </p>
+          ) : (
+            groups.map((group) => (
+              <div
+                key={group.key}
+                className="flex flex-col gap-[var(--spacing-system-xxs)]"
+              >
+                <p className="text-h5 text-ods-text-secondary">{group.label}</p>
+                <div className="overflow-hidden rounded-md border border-ods-border">
+                  {group.items.map((dialog) => (
+                    <MingoChatHistoryRow
+                      key={dialog.id}
+                      dialog={dialog}
+                      isActive={dialog.id === activeDialogId}
+                      onSelect={onSelectDialog}
+                      onRequestRename={onRequestRename}
+                      onRequestArchive={onRequestArchive}
+                    />
+                  ))}
+                </div>
+              </div>
+            ))
+          )}
+          {hasMore ? <div ref={sentinelRef} className="h-px shrink-0" /> : null}
+        </div>
+
+        {/* Scroll-fade — only while content is hidden in that direction. */}
+        <div
+          aria-hidden
+          className={cn(
+            'pointer-events-none absolute inset-x-0 top-0 h-12 transition-opacity duration-150',
+            fade.top ? 'opacity-100' : 'opacity-0',
+          )}
+          style={{
+            background:
+              'linear-gradient(0deg, transparent 0%, var(--color-bg-card) 100%)',
+          }}
+        />
+        <div
+          aria-hidden
+          className={cn(
+            'pointer-events-none absolute inset-x-0 bottom-0 h-12 transition-opacity duration-150',
+            fade.bottom ? 'opacity-100' : 'opacity-0',
+          )}
+          style={{
+            background:
+              'linear-gradient(180deg, transparent 0%, var(--color-bg-card) 100%)',
+          }}
+        />
+      </div>
     </div>
   )
 }

package/src/components/chat/mingo-welcome.tsx

@@ -92,6 +92,10 @@ export interface MingoWelcomeProps {
   loadError?: boolean
   /** Retry handler for the `loadError` state. */
   onRetry?: () => void
+  /** Whether the dialog history has a search bar — when true, the loading
+   *  skeleton includes a search-bar placeholder so it matches the loaded
+   *  layout. Ignored once `dialogHistory` is provided. */
+  historySearchable?: boolean
   /** When provided, renders the "Start Guide Chat" chip (the only wired
    *  action — switches the host chat to Guide mode) and enables the default
    *  promo notification. When omitted, both are suppressed. */
@@ -170,6 +174,7 @@ export function MingoWelcome({
   isLoadingHistory = false,
   loadError = false,
   onRetry,
+  historySearchable = false,
   onStartGuideChat,
   className,
 }: MingoWelcomeProps) {
@@ -287,7 +292,7 @@ export function MingoWelcome({
           )}
         </div>
       ) : isLoadingHistory ? (
-        <MingoChatHistorySkeleton />
+        <MingoChatHistorySkeleton searchable={historySearchable} />
       ) : (
       <>
       {/* Scrollable region — only the greeting + grid scroll; the notification

package/src/components/chat/remark-mention-chips.ts

@@ -18,18 +18,24 @@
  *   - marker: `[a-z]+` — the backend `ContextItemType.marker()` short form
  *     (`device`, `script`, `ticket`, `organization`, `user`, `kb`, `policy`,
  *     `query`, …). Always lowercase.
- *   - id: `[A-Za-z0-9_.+/=-]+` — the mention-token charset (UUIDs with hyphens,
- *     fleet numeric ids, etc.). Matches the composer's `MENTION_TOKEN`.
- *   - A LEFT boundary (start-of-text or whitespace) keeps `@marker:` from
- *     matching inside emails / mid-word (`user@host:1234` never starts a token
- *     because the `@` isn't at a boundary).
+ *   - id: charset `[A-Za-z0-9_.+/=-]` (UUIDs with hyphens, fleet numeric ids,
+ *     base64 global ids, etc.; matches the composer's `MENTION_TOKEN`) — but the
+ *     id may NOT END in `.` or `-`, so a trailing SENTENCE period/dash isn't
+ *     swallowed into the id (`@script:38.` → id `38`, with the `.` left as text).
+ *     Base64 padding `=` and `+`/`/` are still valid final chars.
+ *   - A LEFT boundary (start-of-text or any non-word, non-`@` character) keeps
+ *     `@marker:` from matching inside emails / mid-word (`user@host:1234` never
+ *     starts a token because the `@` is preceded by a word char), while still
+ *     firing when the agent wraps a mention in punctuation — parentheses,
+ *     brackets, quotes — e.g. `(@device:64f0a1)`. The boundary character (if
+ *     any) is captured as `lead` and re-emitted as text, so it is preserved.
  */
 
 import type { Plugin } from 'unified'
 import type { Root, Text, Link } from 'mdast'
 import { visit, SKIP } from 'unist-util-visit'
 
-const MENTION_REGEX = /(^|\s)@([a-z]+):([A-Za-z0-9_.+/=-]+)/g
+const MENTION_REGEX = /(^|[^\w@])@([a-z]+):([A-Za-z0-9_.+/=-]*[A-Za-z0-9_+/=])/g
 
 export const remarkMentionChips: Plugin<[], Root> = () => {
   return (tree: Root) => {
@@ -43,7 +49,7 @@ export const remarkMentionChips: Plugin<[], Root> = () => {
       MENTION_REGEX.lastIndex = 0
       let match: RegExpExecArray | null
       while ((match = MENTION_REGEX.exec(text)) !== null) {
-        const lead = match[1] // '' or the whitespace char before '@'
+        const lead = match[1] // '' or the boundary char before '@' (space, '(', etc.)
         const marker = match[2]
         const id = match[3]
         const tokenStart = match.index + lead.length // position of '@'