@flamingo-stack/openframe-frontend-core 0.0.461 → 0.0.462-snapshot.20260721190919

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

@@ -5,6 +5,7 @@ import { cn } from '../../utils/cn'
 import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu'
 import { Button } from '../ui/button'
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade'
+import { SquareAvatar } from '../ui/square-avatar'
 import { Ellipsis01Icon, SearchXmarkIcon } from '../icons-v2-generated'
 import { ChatListEmptyState } from './chat-list-empty-state'
 import type { DialogItem } from './types/component.types'
@@ -107,6 +108,8 @@ function MingoChatHistoryRow({
   const title = dialog.title || 'Untitled Chat'
   const unread = dialog.unreadMessagesCount ?? 0
   const hasMenu = !!onRequestRename || !!onRequestArchive
+  const owner = dialog.owner
+  const hasAvatar = !!(owner?.name || owner?.avatarUrl)
   // Keep the `⋯` visible while its menu is open — once Radix moves focus into
   // the portalled content the row loses hover/focus-within.
   const [menuOpen, setMenuOpen] = React.useState(false)
@@ -173,46 +176,82 @@ function MingoChatHistoryRow({
           {title}
         </span>
       </div>
-      {hasMenu ? (
-        // Sibling of the padded content (not inside it): sits at the item's
-        // right edge, free of the content's left padding. Revealed on row
-        // hover/focus; kept visible while its menu is open. Hidden on mobile —
-        // it's a hover affordance (no hover on touch).
+      {hasMenu || hasAvatar ? (
+        // Trailing 48px cell (Figma 113:63224): the owner avatar sits centred
+        // by default; hovering the row (or opening the menu) swaps it for the
+        // `⋯` actions button IN PLACE, so the title never reflows. Without an
+        // avatar the cell exists only for the hover menu, so it collapses on
+        // mobile exactly like the old hover-only gutter (no hover on touch).
         <span
-          onClick={(e) => e.stopPropagation()}
           className={cn(
-            // `self-stretch` so the wrapper fills the row height — gives the
-            // button's `h-full` a definite parent to resolve against (under the
-            // row's `items-center` the wrapper would otherwise collapse to its
-            // content and `h-full` on the button would no-op).
-            'self-stretch shrink-0 transition-opacity max-md:hidden',
-            menuOpen
-              ? 'opacity-100'
-              : 'opacity-0 group-hover/row:opacity-100 focus-within:opacity-100',
+            'relative w-12 self-stretch shrink-0',
+            !hasAvatar && 'max-md:hidden',
           )}
         >
-          <ActionsMenuDropdown
-            triggerAriaLabel="Chat actions"
-            groups={[{ items: menuItems }]}
-            open={menuOpen}
-            onOpenChange={setMenuOpen}
-            // Don't return focus (and its ring) to the `⋯` trigger on close.
-            onCloseAutoFocus={(e) => e.preventDefault()}
-            customTrigger={
-              <Button
-                variant="transparent"
-                size="icon"
-                aria-label="Chat actions"
-                // Square, grey icon → white on hover. `h-full` matches the row
-                // height exactly (no breakpoint poke from `size="icon"`'s
-                // responsive `md:h-12`); `w-9` keeps it compact; `p-0` drops the
-                // icon-size padding. tailwind-merge so these win over defaults.
-                className="h-full md:h-full rounded-none p-0 text-ods-text-secondary hover:text-ods-text-primary"
-              >
-                <Ellipsis01Icon />
-              </Button>
-            }
-          />
+          {hasMenu ? (
+            // Revealed on row hover/its own focus; kept visible while the menu
+            // is open. Hidden on mobile — it's a hover affordance. `peer/menu`
+            // so the avatar layer (a later sibling) can fade when the trigger
+            // holds keyboard focus.
+            <span
+              onClick={(e) => e.stopPropagation()}
+              className={cn(
+                'peer/menu absolute inset-0 transition-opacity max-md:hidden',
+                menuOpen
+                  ? 'opacity-100'
+                  : 'opacity-0 group-hover/row:opacity-100 focus-within:opacity-100',
+              )}
+            >
+              <ActionsMenuDropdown
+                triggerAriaLabel="Chat actions"
+                groups={[{ items: menuItems }]}
+                open={menuOpen}
+                onOpenChange={setMenuOpen}
+                // Don't return focus (and its ring) to the `⋯` trigger on close.
+                onCloseAutoFocus={(e) => e.preventDefault()}
+                customTrigger={
+                  <Button
+                    variant="transparent"
+                    size="icon"
+                    aria-label="Chat actions"
+                    // Square, grey icon → white on hover. `h-full`/`w-full` fill
+                    // the 48px cell exactly (no breakpoint poke from
+                    // `size="icon"`'s responsive `md:h-12`); `p-0` drops the
+                    // icon-size padding. tailwind-merge so these win over
+                    // defaults.
+                    className="h-full md:h-full w-full rounded-none p-0 text-ods-text-secondary hover:text-ods-text-primary"
+                  >
+                    <Ellipsis01Icon />
+                  </Button>
+                }
+              />
+            </span>
+          ) : null}
+          {hasAvatar ? (
+            // Avatar layer — clicks fall through to row selection (it covers
+            // the cell whenever the menu trigger is faded out). On desktop it
+            // fades for the menu swap; on mobile it's always shown.
+            <span
+              onClick={() => onSelect?.(dialog.id)}
+              title={owner?.name || undefined}
+              className={cn(
+                'absolute inset-0 flex cursor-pointer items-center justify-center transition-opacity',
+                hasMenu &&
+                  (menuOpen
+                    ? 'opacity-0 pointer-events-none'
+                    : 'md:group-hover/row:opacity-0 md:group-hover/row:pointer-events-none md:peer-[:focus-within]/menu:opacity-0 md:peer-[:focus-within]/menu:pointer-events-none'),
+              )}
+            >
+              <SquareAvatar
+                variant="round"
+                sizePx={24}
+                src={owner?.avatarUrl || undefined}
+                alt={owner?.name || undefined}
+                fallback={owner?.name || undefined}
+                initialsClassName="text-[10px] text-ods-text-secondary"
+              />
+            </span>
+          ) : null}
         </span>
       ) : null}
     </div>
@@ -316,6 +355,7 @@ export function MingoChatHistory({
   onLoadMoreRef.current = onLoadMore
   const isLoadingMoreRef = React.useRef(isLoadingMore)
   isLoadingMoreRef.current = isLoadingMore
+  const dialogCount = dialogs.length
   React.useEffect(() => {
     const root = scrollRef.current
     const sentinel = sentinelRef.current
@@ -331,7 +371,15 @@ export function MingoChatHistory({
     )
     io.observe(sentinel)
     return () => io.disconnect()
-  }, [hasMore])
+    // `dialogCount`/`isLoadingMore` deps re-arm the observer after every page
+    // lands: `observe()` re-reports the CURRENT intersection, so a sentinel
+    // that stays in view (short host-filtered list — e.g. the "My Chats"
+    // scope keeps a handful of rows out of a 20-row page) keeps chaining
+    // loads until the viewport fills or `hasMore` flips. A continuously
+    // visible sentinel never re-crosses the threshold, so the previous
+    // [hasMore]-only observer fired exactly once per mount and the list
+    // grew by a single page per drawer open.
+  }, [hasMore, isLoadingMore, dialogCount])
 
   return (
     <div className={cn('relative flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)]', className)}>

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

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { cn } from '../../utils/cn'
 import { Button } from '../ui/button'
+import { TabSelector } from '../ui/tab-selector'
 import { ChatsIcon } from '../icons-v2-generated/communication/chats-icon'
 import { PlusCircleIcon } from '../icons-v2-generated/signs-and-symbols/plus-circle-icon'
 import { AlertCircleIcon, Refresh01RightIcon } from '../icons-v2-generated'
@@ -14,6 +15,10 @@ import type { DialogItem } from './types/component.types'
 // Types
 // =============================================================================
 
+/** Ownership scope of the rail's dialog list — the current user's chats only,
+ *  or every admin's chats in the tenant. */
+export type MingoHistoryScope = 'my' | 'all'
+
 export interface MingoHistoryRailProps {
   /** Dialogs to list, assumed already sorted newest-first by the host. */
   dialogs: ReadonlyArray<DialogItem>
@@ -32,6 +37,13 @@ export interface MingoHistoryRailProps {
   onRequestRename?: (dialog: DialogItem) => void
   /** Request archive — enables the row "Archive chat" action. */
   onRequestArchive?: (dialog: DialogItem) => void
+  /** Ownership scope shown as a two-state "My Chats / All Chats" selector
+   *  between "Start New Chat" and the list. Rendered only when BOTH `scope`
+   *  and `onScopeChange` are provided; the host owns the state and refilters
+   *  the `dialogs` it passes in. */
+  scope?: MingoHistoryScope
+  /** Scope selector change handler — see `scope`. */
+  onScopeChange?: (scope: MingoHistoryScope) => void
   /** Current server-side search term. Drives the list's "No chats found"
    *  empty state; the search INPUT itself lives in the panel header now, not
    *  in the rail body. */
@@ -77,6 +89,8 @@ export function MingoHistoryRail({
   newChatAlways = false,
   onRequestRename,
   onRequestArchive,
+  scope,
+  onScopeChange,
   searchQuery,
   hasMore = false,
   isLoadingMore = false,
@@ -114,6 +128,23 @@ export function MingoHistoryRail({
         </Button>
       )}
 
+      {/* Two-state ownership scope — "My Chats" / "All Chats". Stays visible in
+          the empty state too: an empty "My Chats" list must still offer the
+          switch to "All Chats" (host filters, so the empty state can be
+          scope-induced). Hidden while the load failed — retry is the only
+          useful action there. */}
+      {scope && onScopeChange && !loadError ? (
+        <TabSelector
+          className="shrink-0"
+          value={scope}
+          onValueChange={(value) => onScopeChange(value as MingoHistoryScope)}
+          items={[
+            { id: 'my', label: 'My Chats' },
+            { id: 'all', label: 'All Chats' },
+          ]}
+        />
+      ) : null}
+
       {loadError ? (
         <div className="flex flex-1 min-h-0 flex-col items-center justify-center gap-[var(--spacing-system-m)] text-center">
           <AlertCircleIcon className="h-8 w-8 text-ods-text-secondary shrink-0" />

package/src/components/chat/quick-action-wall.tsx

@@ -38,24 +38,27 @@ export function interleave<T>(a: ReadonlyArray<T>, b: ReadonlyArray<T>): T[] {
   return out
 }
 
-// Brick-mode padding fallback: ~14 columns of chips per row (~3200px) — one
-// row copy overflows any sensible container, so the loop always engages. Used
-// as the row-count reference and until the container width has been measured;
-// once measured, the per-row pad target adapts to that width (see MIN_CHIP_PX).
+// Brick-mode padding fallback: ~14 columns of chips per row — one row copy
+// overflows any sensible container, so the loop always engages. Used as the
+// row-count reference, and as the pad target until the container and chip
+// widths have been measured (then the per-row target adapts — see chipWidth).
 const DEFAULT_MIN_CHIPS_PER_ROW = 14
 
-// Conservative floor for one chip's on-track footprint in px (icon + a short
-// mono label + Tag padding + the copy gap). The adaptive pad target divides the
-// measured container width by this, so it must stay AT OR BELOW the narrowest
-// real chip — an over-estimate would under-pad and the row could stop scrolling
-// on a wide surface. Realistic quick-action labels are far wider, so the padded
-// copy overflows comfortably; the `+ADAPTIVE_PAD_MARGIN` covers the worst case.
-const MIN_CHIP_PX = 72
+// The adaptive pad target is derived from the MEASURED narrowest chip, not a
+// guessed width: repeats = ceil(containerWidth / measuredChipWidth) + margin.
+// Measuring (rather than assuming ~72px) is what makes it correct for a tiny
+// one-word chip AND a wide multi-word one — a guess that overshoots the real
+// chip under-pads and the row silently stops scrolling.
 const ADAPTIVE_PAD_MARGIN = 2
-// The adaptive target is clamped to [MIN_ADAPTIVE_PAD, DEFAULT_MIN_CHIPS_PER_ROW]:
-// it only ever REDUCES padding below the fixed default (for narrow composers) —
-// never above it, so no wide surface pads more than it does today.
+// Divide-by-near-zero guard ONLY: floors a glitched sub-pixel measurement, but
+// stays BELOW the narrowest real chip (padding alone is wider), so a genuinely
+// tiny one-glyph chip keeps its true measured width and still gets enough
+// repeats to overflow. MAX_ADAPTIVE_PAD bounds the count if the measurement is
+// ever degenerate.
+const MIN_MEASURED_CHIP_PX = 12
+// Sanity bounds on the resulting count.
 const MIN_ADAPTIVE_PAD = 4
+const MAX_ADAPTIVE_PAD = 60
 
 // Chat-agent walls (fae/mingo) cap the brick stack at 2 rows so the quick
 // actions never crowd the composer; every other surface keeps the caller's
@@ -187,22 +190,39 @@ export function QuickActionWall({
   contentClassName,
   sync,
 }: QuickActionWallProps) {
-  // Measure the brick container so the per-row pad target can adapt to its
-  // width (see MIN_CHIP_PX): a narrow chat composer needs only a handful of
-  // repeats to overflow, a wide wall needs many. Pre-measure / SSR falls back
-  // to the fixed default, which always overflows. Only used in brick mode.
+  // Adapt the per-row pad target to the actual geometry (brick mode only): a
+  // narrow chat composer needs only a handful of repeats to overflow, a wide
+  // wall needs many, and a tiny chip needs more repeats than a wide one. We
+  // measure BOTH the container width and the narrowest rendered chip, then pad
+  // to ceil(width / chip) + margin. Pre-measure / SSR falls back to the fixed
+  // default, which overflows any width.
   const brickRef = React.useRef<HTMLDivElement>(null)
   const [brickWidth, setBrickWidth] = React.useState(0)
+  const [chipWidth, setChipWidth] = React.useState(0)
   React.useEffect(() => {
     const el = brickRef.current
-    if (!el || typeof ResizeObserver === 'undefined') return
-    const ro = new ResizeObserver(entries => {
-      const w = entries[0]?.contentRect.width ?? 0
-      if (w > 0) setBrickWidth(w)
-    })
+    if (!el) return
+    // Read both widths straight off the laid-out DOM (offsetWidth is synchronous
+    // and reliable — a ResizeObserver initial callback can be throttled or never
+    // fire in a backgrounded/offscreen tab, which would strand the target on its
+    // fallback). Chips render as buttons on interactive walls — the only case
+    // that pads short sets; decorative walls keep the fallback. Converges in one
+    // pass: the widths don't depend on how many repeats we then draw.
+    const measure = () => {
+      const w = el.offsetWidth
+      if (w > 0) setBrickWidth(prev => (prev === w ? prev : w))
+      const chips = [...el.querySelectorAll('button')].map(b => (b as HTMLElement).offsetWidth).filter(x => x > 0)
+      if (chips.length > 0) {
+        const min = Math.max(Math.min(...chips), MIN_MEASURED_CHIP_PX)
+        setChipWidth(prev => (prev === min ? prev : min))
+      }
+    }
+    measure()
+    if (typeof ResizeObserver === 'undefined') return
+    const ro = new ResizeObserver(measure)
     ro.observe(el)
     return () => ro.disconnect()
-  }, [])
+  }, [chips])
 
   // Repeat-pad the track (stable suffixed keys; repeats keep the full chip —
   // identical selected/interactive state, so every visible instance behaves
@@ -266,10 +286,10 @@ export function QuickActionWall({
     // duplicates); before the first measure (or SSR) fall back to the fixed
     // default, which overflows any width.
     const adaptivePerRow =
-      brickWidth > 0
+      brickWidth > 0 && chipWidth > 0
         ? Math.min(
-            Math.max(Math.ceil(brickWidth / MIN_CHIP_PX) + ADAPTIVE_PAD_MARGIN, MIN_ADAPTIVE_PAD),
-            DEFAULT_MIN_CHIPS_PER_ROW,
+            Math.max(Math.ceil(brickWidth / chipWidth) + ADAPTIVE_PAD_MARGIN, MIN_ADAPTIVE_PAD),
+            MAX_ADAPTIVE_PAD,
           )
         : DEFAULT_MIN_CHIPS_PER_ROW
     const perRowTarget = minChips ? Math.ceil(minChips / stackRows) : adaptivePerRow

package/src/components/chat/types/component.types.ts

@@ -608,6 +608,14 @@ export interface DialogItem {
   timestamp?: Date | string
   isActive?: boolean
   unreadMessagesCount?: number
+  /** Dialog owner (creator) — drives the trailing avatar in the chat-history
+   *  rows (Figma 113:63224). Omit to render the row without an avatar. */
+  owner?: {
+    /** Full display name — initials fallback + `title` tooltip. */
+    name?: string | null
+    /** Absolute avatar URL; falls back to initials when absent or failing. */
+    avatarUrl?: string | null
+  }
 }
 
 // ========== Chat Sidebar Props ==========

package/src/components/chat/types/unified-chat-state.types.ts

@@ -369,6 +369,15 @@ export interface UnifiedChatState {
   /** Fetch the next page of dialogs. No-op when `hasMoreDialogs` is false. */
   loadMoreDialogs: () => Promise<void>
 
+  /** Ownership scope of `dialogs` — `'my'` (current user's chats) or `'all'`
+   *  (every admin's). Optional: adapters without ownership data omit it and
+   *  the "My Chats / All Chats" selector stays hidden. The HOST owns the
+   *  filtering — `dialogs` must already reflect this scope. */
+  dialogScope?: 'my' | 'all'
+
+  /** Switch the ownership scope — see `dialogScope`. */
+  setDialogScope?: (scope: 'my' | 'all') => void
+
   /** Whether more historical messages remain in the active dialog. */
   hasMoreMessages: boolean
 

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

@@ -67,15 +67,18 @@ export function TabSelector({
               onClick={() => onValueChange(item.id)}
               aria-label={!item.label ? item.ariaLabel : undefined}
               className={cn(
-                'flex flex-1 items-center justify-center gap-2 rounded-xs p-2 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 [font-weight:700]'
+                    ? 'cursor-not-allowed bg-ods-bg-surface text-ods-text-secondary'
                     : 'cursor-not-allowed bg-transparent text-ods-text-secondary'
                   : isActive
                     ? variant === 'primary'
-                      ? 'bg-ods-accent text-ods-text-on-accent cursor-default [font-weight:700]'
-                      : 'bg-ods-bg-surface text-ods-text-primary cursor-default [font-weight:700]'
+                      ? 'bg-ods-accent text-ods-text-on-accent cursor-default'
+                      : 'bg-ods-bg-surface text-ods-text-primary cursor-default'
                     : 'bg-transparent text-ods-text-primary hover:bg-ods-bg-hover cursor-pointer',
               )}
             >

package/src/stories/QuickActionWall.stories.tsx

@@ -200,6 +200,29 @@ export const BrickNarrowComposer: Story = {
   ),
 }
 
+/** Brick, single short chip: one tiny one-word action ("ONE") in a ~412px
+ *  composer. The pad target is measured from the ACTUAL chip width, so a narrow
+ *  chip is repeated enough times to overflow and scroll — a width guess that
+ *  overshot the real chip would under-pad and the row would sit static. */
+export const BrickSingleShortChip: Story = {
+  render: () => (
+    <div className="w-[412px] max-w-full rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-mf)]">
+      <QuickActionWall
+        chips={[{ id: 'one', label: 'ONE', theme: FAE_THEME, onSelect: () => console.log('one') }]}
+        agentSlug="mingo"
+        rows={4}
+        pauseOnHover
+        dragScroll
+        fade={['left', 'right']}
+        fadeSize={{ left: 32 }}
+        fadeColor="var(--color-bg-card)"
+        copyGap="var(--spacing-system-xxs)"
+        className="max-h-44"
+      />
+    </div>
+  ),
+}
+
 /** Brick, non-agent (no `agentSlug`): keeps exactly `rows` rows (marketing /
  *  onboarding walls are sized for their design), still getting the even split
  *  so a row is never filled with only one repeated chip. */