@flamingo-stack/openframe-frontend-core 0.0.458 → 0.0.459-snapshot.20260721100450

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

@@ -3,7 +3,6 @@
 import * as React from 'react'
 import { cn } from '../../utils/cn'
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade'
-import { OverlayScrollArea } from '../ui/overlay-scroll-area'
 import { ChatTicketItem, type ChatTicketItemData } from './entity-cards/chat-ticket-item'
 
 export interface ChatTicketListProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -47,12 +46,7 @@ const ChatTicketList = React.forwardRef<HTMLDivElement, ChatTicketListProps>(
             !fadeBottom && "border-b rounded-b-md",
           )}
         >
-          <OverlayScrollArea
-            viewportRef={scrollRef}
-            className="h-full"
-            contentClassName="overscroll-contain"
-            onScroll={updateFade}
-          >
+          <div ref={scrollRef} className="overflow-y-auto overscroll-contain h-full" onScroll={updateFade}>
             {tickets.map((ticket) => (
               <ChatTicketItem
                 key={ticket.id}
@@ -60,7 +54,7 @@ const ChatTicketList = React.forwardRef<HTMLDivElement, ChatTicketListProps>(
                 onClick={onTicketClick}
               />
             ))}
-          </OverlayScrollArea>
+          </div>
 
           {/* Scroll-fade overlays — tinted with the page background so edge
               tickets fade into the surface behind the list in BOTH themes

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

@@ -2357,6 +2357,9 @@ function EmbeddableChatInner({
                       setQuickActionPreview(action.prompt ?? action.label)
                     }
                     onQuickActionHoverEnd={() => setQuickActionPreview(null)}
+                    // A built-in agent caps the quick-action wall at 2 rows;
+                    // this is the Mingo surface, so fall back to 'mingo'.
+                    agentSlug={activeAgentSlug ?? 'mingo'}
                   />
                 ) : (
                   /* Figma node 7532:328214 — Guide-mode empty state: greeting
@@ -2404,6 +2407,9 @@ function EmbeddableChatInner({
                       setQuickActionPreview(action.prompt ?? action.label)
                     }
                     onQuickActionHoverEnd={() => setQuickActionPreview(null)}
+                    // In agent mode a built-in agent (fae/mingo) caps the wall at
+                    // 2 rows; host/guide mode (no active agent) keeps the default.
+                    agentSlug={activeAgentSlug}
                   >
                     {/* Figma node 7363:205938 — single-column slash-command
                         list. No own scroll (GuideWelcome's region scrolls); the

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

@@ -4,7 +4,6 @@ import * as React from 'react'
 import { cn } from '../../utils/cn'
 import { MingoIcon } from '../icons'
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade'
-import { OverlayScrollArea } from '../ui/overlay-scroll-area'
 import { Skeleton } from '../ui/skeleton'
 import { QuickActionWall } from './quick-action-wall'
 import { EntityIcon } from '../icon-display'
@@ -60,6 +59,10 @@ export interface GuideWelcomeProps {
   onQuickActionHover?: (action: GuideQuickAction) => void
   /** Pointer/keyboard focus leaves the chip — e.g. restore the composer. */
   onQuickActionHoverEnd?: () => void
+  /** Agent this empty state belongs to — forwarded to the quick-action
+   *  {@link QuickActionWall} so a built-in agent (`'fae'`/`'mingo'`) caps the
+   *  brick stack at 2 rows. Unset (host/guide mode) keeps the full `rows` cap. */
+  agentSlug?: string
   /** Slash-command onboarding list — rendered inside the shared scroll region
    *  below the greeting (so greeting + list scroll together, with edge fades). */
   children?: React.ReactNode
@@ -96,6 +99,7 @@ export function GuideWelcome({
   onQuickAction,
   onQuickActionHover,
   onQuickActionHoverEnd,
+  agentSlug,
   children,
   className,
 }: GuideWelcomeProps) {
@@ -142,11 +146,10 @@ export function GuideWelcome({
       {/* Greeting + slash-command list share one scroll region; `relative` so
           the edge fades can overlay it. */}
       <div className="relative flex flex-1 min-h-0 flex-col">
-        <OverlayScrollArea
-          viewportRef={scrollRef}
+        <div
+          ref={scrollRef}
           onScroll={updateScrollFade}
-          className="flex-1 min-h-0"
-          contentClassName="flex min-h-full flex-col gap-[var(--spacing-system-m)] overscroll-contain"
+          className="flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)] overflow-y-auto overscroll-contain"
         >
           {/* Greeting grows to fill (`flex-1`) so the slash-command list stays
               anchored below it — but its content is anchored at the TOP of the
@@ -189,7 +192,7 @@ export function GuideWelcome({
           </div>
 
           {children}
-        </OverlayScrollArea>
+        </div>
 
         {/* Edge scroll-fades — visible only when content is hidden beyond them. */}
         <ScrollFadeOverlay edge="top" visible={fadeTop} className="h-12" />
@@ -207,6 +210,7 @@ export function GuideWelcome({
       {quickActions.length > 0 && (
         <QuickActionWall
           chips={chipItems}
+          agentSlug={agentSlug}
           rows={4}
           pauseOnHover
           dragScroll

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

@@ -5,7 +5,6 @@ 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 { OverlayScrollArea } from '../ui/overlay-scroll-area'
 import { Ellipsis01Icon, SearchXmarkIcon } from '../icons-v2-generated'
 import { ChatListEmptyState } from './chat-list-empty-state'
 import type { DialogItem } from './types/component.types'
@@ -339,11 +338,10 @@ export function MingoChatHistory({
       {/* Scroll region — the search INPUT now lives in the panel header
           (Figma 116:51217), so the list is just the grouped rows + fades. */}
       <div className="relative flex flex-1 min-h-0 flex-col">
-        <OverlayScrollArea
-          viewportRef={scrollRef}
+        <div
+          ref={scrollRef}
           onScroll={updateFade}
-          className="flex-1 min-h-0"
-          contentClassName="flex flex-col gap-[var(--spacing-system-m)] overscroll-contain"
+          className="flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)] overflow-y-auto overscroll-contain"
         >
           {noSearchResults ? (
             // No search matches — same centred glyph + title + caption layout as
@@ -376,7 +374,7 @@ export function MingoChatHistory({
             ))
           )}
           {hasMore ? <div ref={sentinelRef} className="h-px shrink-0" /> : null}
-        </OverlayScrollArea>
+        </div>
 
         {/* Scroll-fade — only while content is hidden in that direction. */}
         <ScrollFadeOverlay edge="top" visible={fadeTop} color="var(--color-bg-card)" className="h-12" />

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

@@ -8,7 +8,6 @@ import { QuickActionChipButton } from './quick-action-chip'
 import { QuickActionWall } from './quick-action-wall'
 import { Button } from '../ui/button'
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade'
-import { OverlayScrollArea } from '../ui/overlay-scroll-area'
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon'
 import {
   CompassIcon,
@@ -88,6 +87,10 @@ export interface MingoWelcomeProps {
    *  action — switches the host chat to Guide mode) and enables the default
    *  promo notification. When omitted, both are suppressed. */
   onStartGuideChat?: () => void
+  /** Agent this empty state belongs to — forwarded to the quick-action
+   *  {@link QuickActionWall} so a built-in agent (`'fae'`/`'mingo'`) caps the
+   *  brick stack at 2 rows. Defaults to `'mingo'` (this is the Mingo surface). */
+  agentSlug?: string
   /** Appended to the root element. */
   className?: string
 }
@@ -139,6 +142,7 @@ export function MingoWelcome({
   loadError = false,
   onRetry,
   onStartGuideChat,
+  agentSlug = 'mingo',
   className,
 }: MingoWelcomeProps) {
   // Greeting never weaves the user's name in — always the plain "Hey, I'm
@@ -240,11 +244,10 @@ export function MingoWelcome({
           input. The wrapper is `relative` so the scroll-fade gradients can
           overlay the top/bottom edges. */}
       <div className="relative flex flex-1 min-h-0 flex-col">
-      <OverlayScrollArea
-        viewportRef={scrollRef}
+      <div
+        ref={scrollRef}
         onScroll={updateScrollFade}
-        className="flex-1 min-h-0"
-        contentClassName="flex min-h-full flex-col gap-[var(--spacing-system-m)] overscroll-contain"
+        className="flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)] overflow-y-auto overscroll-contain"
       >
         {/* Greeting — grows to fill (`flex-1`) so it centres vertically,
             keeping the grid anchored at the bottom of the scroll area. Default
@@ -263,7 +266,7 @@ export function MingoWelcome({
           <p className="text-h4 text-ods-text-secondary">{subtitle}</p>
         </div>
       </div>
-      </OverlayScrollArea>
+      </div>
 
       {/* Edge scroll-fades — visible only when content is hidden beyond them.
           Fade into the panel's dark `ods-bg` surface (the default color), matching
@@ -339,6 +342,7 @@ export function MingoWelcome({
                 onHoverStart: () => onQuickActionHover?.(action),
                 onHoverEnd: () => onQuickActionHoverEnd?.(),
               }))}
+              agentSlug={agentSlug}
               rows={4}
               pauseOnHover
               dragScroll

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

@@ -42,6 +42,11 @@ export function interleave<T>(a: ReadonlyArray<T>, b: ReadonlyArray<T>): T[] {
 // row copy overflows any sensible container, so the loop always engages.
 const DEFAULT_MIN_CHIPS_PER_ROW = 14
 
+// 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
+// `rows` as its cap.
+const AGENT_MAX_ROWS = 2
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -92,14 +97,24 @@ export interface QuickActionWallProps {
    *  walls where repeats would duplicate flip ids, need no padding). */
   minChips?: number
   /**
-   * BRICK-WALL mode: render this many stacked independent single-row
-   * marquees (chips distributed round-robin) instead of one track. Rows pack
-   * their chips edge-to-edge like bricks — a grid would column-align chips
-   * of different widths and leave holes — and each row loops on its own
-   * wrap, so the courses stagger organically. Horizontal only; the fades
+   * BRICK-WALL mode: the MAXIMUM number of stacked single-row marquees. The
+   * actual row count grows with the chip supply — `ceil(chips / 14)` capped at
+   * `rows` — so a short action set fills one row (padded with its own repeats)
+   * instead of spreading one chip per row. The originals are split evenly
+   * ACROSS the active rows first, THEN each row pads to a full course, so no
+   * row is ever all-duplicates while another holds the unique chips. Rows pack
+   * edge-to-edge like bricks (a grid would column-align mismatched widths and
+   * leave holes) and each loops on its own wrap. Horizontal only; the fades
    * draw ONCE over the whole stack.
    */
   rows?: number
+  /**
+   * Chat agent this wall belongs to (`'fae'` / `'mingo'`). When set to a
+   * built-in agent it caps the brick stack at {@link AGENT_MAX_ROWS} (2) so the
+   * actions stay compact above the composer; any other value (or unset) leaves
+   * the cap at `rows`. Optional — decorative/marketing walls omit it.
+   */
+  agentSlug?: string
   /** Draw skeleton chips instead of `chips` (the shared
    *  {@link QuickActionChipSkeleton} — 1:1 geometry with loaded chips).
    *  Callers own the policy (`loading` flag vs skeleton-when-empty). */
@@ -150,6 +165,7 @@ export function QuickActionWall({
   copyGap,
   minChips,
   rows,
+  agentSlug,
   loading = false,
   skeletonCount = 24,
   className,
@@ -159,7 +175,9 @@ export function QuickActionWall({
   // Repeat-pad the track (stable suffixed keys; repeats keep the full chip —
   // identical selected/interactive state, so every visible instance behaves
   // the same and the clone copy stays geometry-identical by construction).
-  const padTarget = minChips ?? (rows ? rows * DEFAULT_MIN_CHIPS_PER_ROW : undefined)
+  // Brick mode does its own per-row padding below, so this pads only the
+  // single-track (wrap / vertical) walls.
+  const padTarget = rows ? undefined : minChips
   const track = React.useMemo(() => {
     if (!padTarget || chips.length === 0 || chips.length >= padTarget) return chips
     const repeats = Math.ceil(padTarget / chips.length)
@@ -198,8 +216,35 @@ export function QuickActionWall({
 
   // ---- BRICK-WALL mode: stacked independent row marquees ---------------------
   if (rows && rows > 0) {
-    const rowLists = Array.from({ length: rows }, (_, r) => track.filter((_, i) => i % rows === r))
-    const skelPerRow = Math.ceil(skeletonCount / rows)
+    // Chat-agent walls (fae/mingo) grow the stack with the chip supply and cap
+    // it at AGENT_MAX_ROWS (2) so the actions stay compact above the composer.
+    // Every other surface keeps exactly `rows` rows (marketing/onboarding walls
+    // are sized for their design and carry far fewer than a full course/row).
+    const agentCapped = agentSlug === 'fae' || agentSlug === 'mingo'
+    const rowCap = agentCapped ? Math.min(rows, AGENT_MAX_ROWS) : rows
+    const dataRows = agentCapped
+      ? Math.min(Math.max(1, Math.ceil(chips.length / DEFAULT_MIN_CHIPS_PER_ROW)), rowCap)
+      : rows
+    // Skeletons hold the cap so the row count never jumps when real chips land.
+    const stackRows = loading ? rowCap : dataRows
+    // Per-row overflow target: a custom `minChips` budget split across the
+    // stack, else the 14-chip default that guarantees the loop engages.
+    const perRowTarget = minChips ? Math.ceil(minChips / stackRows) : DEFAULT_MIN_CHIPS_PER_ROW
+
+    // Split the ORIGINAL chips evenly across the rows FIRST (each row holds
+    // distinct actions), THEN pad each row to a full course with repeats of its
+    // OWN chips — so a row is never all-duplicates while another carries the
+    // unique ones (the old pad-then-slice split did exactly that when the chip
+    // count lined up with the row count).
+    const rowLists = Array.from({ length: stackRows }, (_, r) => {
+      const base = chips.filter((_, i) => i % stackRows === r)
+      if (base.length === 0 || base.length >= perRowTarget) return base
+      const repeats = Math.ceil(perRowTarget / base.length)
+      return Array.from({ length: repeats }, (_, rep) =>
+        rep === 0 ? base : base.map(chip => ({ ...chip, id: `${chip.id}__r${rep}` })),
+      ).flat()
+    })
+    const skelPerRow = Math.ceil(skeletonCount / stackRows)
     return (
       <div className={cn('relative flex flex-col overflow-hidden', className)} style={{ gap }}>
         {rowLists.map((list, r) => (

package/src/components/features/notifications/notification-drawer.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { useEffect, useRef } from 'react'
-import { OverlayScrollArea } from '../../ui/overlay-scroll-area'
 import { BellOffIcon } from '../../icons-v2-generated/interface/bell-off-icon'
 import { ClockHistoryIcon, ArrowRightUpIcon } from '../../icons-v2-generated'
 import { useAppLayoutDrawerContainer } from '../../navigation/app-layout-context'
@@ -190,12 +189,9 @@ function DrawerScrollList({
 
   const isEmpty = unreadNotifications.length === 0
   return (
-    <OverlayScrollArea
-      viewportRef={scrollRef}
-      // Horizontal padding lives on the host: OverlayScrollbars zeroes viewport
-      // padding, so `px-*` on `contentClassName` would be silently dropped.
-      className="flex-1 min-h-0 px-[var(--spacing-system-m)]"
-      contentClassName="flex flex-col gap-[var(--spacing-system-xs)]"
+    <div
+      ref={scrollRef}
+      className="flex flex-1 flex-col gap-[var(--spacing-system-xs)] overflow-y-auto px-[var(--spacing-system-m)]"
     >
       {isEmpty && !isLoadingMore ? (
         <EmptyState />
@@ -218,7 +214,7 @@ function DrawerScrollList({
           {loadMore && hasMore && <div ref={sentinelRef} className="h-1" aria-hidden="true" />}
         </>
       )}
-    </OverlayScrollArea>
+    </div>
   )
 }
 

package/src/components/features/time-tracker/time-tracker-panel.tsx

@@ -21,7 +21,6 @@ import {
   XmarkIcon,
 } from '../../icons-v2-generated'
 import { useTrackerClock } from './use-tracker-clock'
-import { OverlayScrollArea } from '../../ui/overlay-scroll-area'
 import type { TimeTrackerData, TimeTrackerEntry, TimeTrackerStatus } from './types'
 
 interface CustomerAutocompleteOption extends AutocompleteOption {
@@ -150,18 +149,11 @@ export function TimeTrackerPanel({
   const visibleEntries = lastEntries.slice(0, 3)
 
   return (
-    <OverlayScrollArea
+    <div
       className={cn(
-        // Padding lives on the host, NOT `contentClassName`: OverlayScrollbars
-        // forces `padding: 0` on the viewport, so padding on the scroller is
-        // silently dropped (see OverlayScrollArea docs).
-        'max-h-[calc(100vh-6rem)] w-full rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-m)]',
+        'relative flex max-h-[calc(100vh-6rem)] w-full flex-col gap-[var(--spacing-system-l)] overflow-y-auto rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-m)]',
         className,
       )}
-      // No `relative` here so the absolute close button anchors to the padded
-      // host (OverlayScrollArea's host is always relative) and keeps its inset
-      // from the card edge instead of from the padding box.
-      contentClassName="flex flex-col gap-[var(--spacing-system-l)]"
     >
       <Button
         variant="transparent"
@@ -322,7 +314,7 @@ export function TimeTrackerPanel({
       <Button variant="outline" fullWidth onClick={onClose} className="md:hidden">
         Close
       </Button>
-    </OverlayScrollArea>
+    </div>
   )
 }
 

package/src/components/layout/page-container.tsx

@@ -4,7 +4,6 @@ import React from 'react'
 import { cn } from '../../utils/cn'
 import type { ActionsMenuGroup } from '../ui/actions-menu'
 import { PageActions, type PageActionButton } from '../ui/page-actions'
-import { OverlayScrollArea } from '../ui/overlay-scroll-area'
 import { BackButton } from './back-button'
 
 // Legacy interface for backward compatibility (layout version)
@@ -394,7 +393,7 @@ function renderAdvancedPageContainer({
 
     switch (variant) {
       case 'detail':
-        return cn('flex-1 min-h-0', mobilePadding, contentClassName)
+        return cn('flex-1 overflow-auto', mobilePadding, contentClassName)
       case 'list':
         return cn('flex flex-col gap-4 md:gap-6', mobilePadding, contentClassName)
       case 'form':
@@ -408,21 +407,10 @@ function renderAdvancedPageContainer({
   return (
     <div className={getContainerClasses()}>
       {renderHeader()}
-
-      {variant === 'detail' ? (
-        // The only scrolling variant — standardized overlay scrollbar.
-        // `contentClassName` is forwarded to BOTH layers: padding stays effective
-        // on the host, while layout (`flex flex-col gap-*`) reaches the scroller,
-        // the direct parent of the children (OverlayScrollbars zeroes viewport
-        // padding, so padding on the scroller alone would be dropped).
-        <OverlayScrollArea className={getContentClasses()} contentClassName={contentClassName}>
-          {children}
-        </OverlayScrollArea>
-      ) : (
-        <div className={getContentClasses()}>
-          {children}
-        </div>
-      )}
+      
+      <div className={getContentClasses()}>
+        {children}
+      </div>
     </div>
   )
 }

package/src/components/ui/drawer.tsx

@@ -7,7 +7,6 @@ import { X } from "lucide-react"
 
 import { cn } from "../../utils/cn"
 import { useHeaderHeight } from "../../hooks/ui/use-header-height"
-import { OverlayScrollArea } from "./overlay-scroll-area"
 
 /** Unified overlay backdrop — dimmed, no blur. Single source of truth for
  *  every full-screen backdrop (Drawer, AppLayoutDrawer, MobileBurgerMenu,
@@ -531,16 +530,12 @@ DrawerDescription.displayName = "DrawerDescription"
 
 const DrawerBody = ({
   className,
-  children,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <OverlayScrollArea
-    className={cn("flex-1 min-h-0", className)}
-    contentClassName="flex flex-col gap-4"
+  <div
+    className={cn("flex flex-1 flex-col gap-4 overflow-y-auto", className)}
     {...props}
-  >
-    {children}
-  </OverlayScrollArea>
+  />
 )
 DrawerBody.displayName = "DrawerBody"
 

package/src/components/ui/index.ts

@@ -177,4 +177,3 @@ export * from './simple-markdown-renderer'
 export { RichMarkdownRenderer, type RichMarkdownRendererProps } from './rich-markdown-renderer'
 export * from './filter-pill-row'
 
-export * from './overlay-scroll-area'

package/src/components/ui/modal-v2.tsx

@@ -5,7 +5,6 @@ import { useEffect, useState } from "react"
 import { usePreventScroll } from "@react-aria/overlays"
 import { XmarkIcon } from "../icons-v2-generated"
 import { cn } from "../../utils/cn"
-import { OverlayScrollArea } from "./overlay-scroll-area"
 
 // Duration of the open/close animation in ms — keep in sync with the
 // `duration-200` utilities applied to the backdrop and panel below.
@@ -132,18 +131,9 @@ Modal.displayName = "ModalV2"
 
 const ModalContent = React.forwardRef<HTMLDivElement, ModalContentProps>(
   ({ children, className }, ref) => (
-    // `className` goes to BOTH layers on purpose: historically it styled the
-    // single scrolling div that directly parented the children, so it may carry
-    // layout (`flex flex-col gap-*` — must reach the scroller/`contentClassName`,
-    // the direct parent of the children) OR padding (must stay on the host, since
-    // OverlayScrollbars zeroes viewport padding). Each class lands where it works.
-    <OverlayScrollArea
-      viewportRef={ref}
-      className={cn("flex-1 min-h-0", className)}
-      contentClassName={className}
-    >
+    <div ref={ref} className={cn("flex-1 min-h-0 overflow-y-auto", className)}>
       {children}
-    </OverlayScrollArea>
+    </div>
   )
 )
 ModalContent.displayName = "ModalV2Content"

package/src/components/ui/modal.tsx

@@ -4,7 +4,6 @@ import * as React from "react"
 import { useEffect } from "react"
 import { usePreventScroll } from "@react-aria/overlays"
 import { cn } from "../../utils/cn"
-import { OverlayScrollArea } from "./overlay-scroll-area"
 
 interface ModalProps {
   isOpen: boolean
@@ -83,15 +82,9 @@ Modal.displayName = "Modal"
 /** @deprecated Use ModalV2Content from './modal-v2' instead. */
 const ModalContent = React.forwardRef<HTMLDivElement, ModalContentProps>(
   ({ children, className }, ref) => (
-    // See ModalV2Content: `className` may carry layout (must reach the scroller)
-    // or padding (must stay on the host), so it goes to both layers.
-    <OverlayScrollArea
-      viewportRef={ref}
-      className={cn("min-h-0 flex-1", className)}
-      contentClassName={className}
-    >
+    <div ref={ref} className={cn("overflow-y-auto min-h-0 flex-1", className)}>
       {children}
-    </OverlayScrollArea>
+    </div>
   )
 )
 ModalContent.displayName = "ModalContent"

package/src/stories/QuickActionWall.stories.tsx

@@ -127,3 +127,68 @@ export const Loading: Story = {
     </div>
   ),
 }
+
+// Brick-mode chip set: enough distinct actions to fill more than two full
+// courses, so the agent cap and the even split are both visible.
+const BRICK_ACTIONS: ReadonlyArray<QuickActionChip> = [
+  ...IT_ACTIONS,
+  ...SEC_ACTIONS,
+  ...FAE_ACTIONS.map((c) => ({ ...c, theme: FAE_THEME })),
+].map((c) => ({ ...c, onSelect: () => console.log(c.id) }))
+
+/** Brick, chat agent (`agentSlug="mingo"`): the stack grows with the chip
+ *  supply but caps at 2 rows. Originals are split evenly across the two rows
+ *  first, then each row pads to a full course — no row is all-duplicates. */
+export const BrickAgentCapped: Story = {
+  render: () => (
+    <QuickActionWall
+      chips={BRICK_ACTIONS}
+      agentSlug="mingo"
+      rows={4}
+      pauseOnHover
+      dragScroll
+      fade={['left', 'right']}
+      fadeSize={{ left: 32 }}
+      fadeColor="var(--color-bg)"
+      copyGap="var(--spacing-system-xxs)"
+      className="max-h-44"
+    />
+  ),
+}
+
+/** Brick, few actions (`agentSlug="fae"`, 3 chips): fewer than one course, so
+ *  the stack collapses to a SINGLE row padded with its own repeats instead of
+ *  spreading one chip per row. */
+export const BrickFewActions: Story = {
+  render: () => (
+    <QuickActionWall
+      chips={FAE_ACTIONS.slice(0, 3).map((c) => ({ ...c, theme: FAE_THEME, onSelect: () => console.log(c.id) }))}
+      agentSlug="fae"
+      rows={4}
+      pauseOnHover
+      dragScroll
+      fade={['left', 'right']}
+      fadeSize={{ left: 32 }}
+      fadeColor="var(--color-bg)"
+      copyGap="var(--spacing-system-xxs)"
+      className="max-h-44"
+    />
+  ),
+}
+
+/** 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. */
+export const BrickNonAgent: Story = {
+  render: () => (
+    <QuickActionWall
+      chips={BRICK_ACTIONS}
+      rows={4}
+      fade={['left', 'right']}
+      fadeSize={{ left: 32 }}
+      fadeColor="var(--color-bg)"
+      copyGap="var(--spacing-system-xxs)"
+      className="max-h-56"
+    />
+  ),
+}

package/src/styles/index.css

@@ -10,8 +10,6 @@
 /* Vendor/library style overrides */
 @import "./vendor-react-easy-crop.css";
 @import "./vendor-react-scroll.css";
-@import "./vendor-overlayscrollbars.css";
-@import "./overlay-scrollbars-theme.css";
 
 @tailwind base;
 @tailwind components;