@flamingo-stack/openframe-frontend-core 0.0.459 → 0.0.460-snapshot.20260721124036

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

@@ -38,10 +38,30 @@ export function interleave<T>(a: ReadonlyArray<T>, b: ReadonlyArray<T>): T[] {
   return out
 }
 
-// Brick-mode padding default: ~14 columns of chips per row (~3200px) — one
-// row copy overflows any sensible container, so the loop always engages.
+// 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).
 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
+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.
+const MIN_ADAPTIVE_PAD = 4
+
+// 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 +112,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,16 +180,36 @@ export function QuickActionWall({
   copyGap,
   minChips,
   rows,
+  agentSlug,
   loading = false,
   skeletonCount = 24,
   className,
   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.
+  const brickRef = React.useRef<HTMLDivElement>(null)
+  const [brickWidth, setBrickWidth] = 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)
+    })
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [])
+
   // 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,10 +248,48 @@ 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 — how many chips one copy must hold to overflow
+    // the container (so the marquee loop engages). Priority: an explicit
+    // `minChips` budget wins; otherwise adapt to the MEASURED width (just enough
+    // repeats to overflow — no more, so a narrow composer isn't flooded with
+    // duplicates); before the first measure (or SSR) fall back to the fixed
+    // default, which overflows any width.
+    const adaptivePerRow =
+      brickWidth > 0
+        ? Math.min(
+            Math.max(Math.ceil(brickWidth / MIN_CHIP_PX) + ADAPTIVE_PAD_MARGIN, MIN_ADAPTIVE_PAD),
+            DEFAULT_MIN_CHIPS_PER_ROW,
+          )
+        : DEFAULT_MIN_CHIPS_PER_ROW
+    const perRowTarget = minChips ? Math.ceil(minChips / stackRows) : adaptivePerRow
+
+    // 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 }}>
+      <div ref={brickRef} className={cn('relative flex flex-col overflow-hidden', className)} style={{ gap }}>
         {rowLists.map((list, r) => (
           <MarqueeWall
             key={r}

package/src/stories/QuickActionWall.stories.tsx

@@ -127,3 +127,92 @@ 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, narrow composer: the per-row pad target adapts to the measured
+ *  container width, so a chat-composer-width wall repeats each action only as
+ *  many times as it takes to overflow (far fewer duplicates than the fixed
+ *  14), while a wide wall keeps the full course. Constrained to ~420px here to
+ *  show the reduced duplication. */
+export const BrickNarrowComposer: Story = {
+  render: () => (
+    <div className="w-[420px] max-w-full rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-mf)]">
+      <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-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. */
+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"
+    />
+  ),
+}