@flamingo-stack/openframe-frontend-core 0.0.454 → 0.0.455

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

@@ -46,7 +46,7 @@ const ChatTicketList = React.forwardRef<HTMLDivElement, ChatTicketListProps>(
             !fadeBottom && "border-b rounded-b-md",
           )}
         >
-          <div ref={scrollRef} className="overflow-y-auto h-full" onScroll={updateFade}>
+          <div ref={scrollRef} className="overflow-y-auto overscroll-contain h-full" onScroll={updateFade}>
             {tickets.map((ticket) => (
               <ChatTicketItem
                 key={ticket.id}

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

@@ -148,7 +148,7 @@ export function ContextItemsList({
       // 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)}
+      className={cn('max-h-[min(340px,45vh)] overflow-y-auto overscroll-contain', className)}
     >
       {items.map(item => {
         const selected = selectedKeys.has(itemKey(item))

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

@@ -112,6 +112,18 @@ import { resolveIcon } from './utils/icon-library'
 import { getSourceIconName } from './utils/source-icons'
 import { formatSingularLookupInvocation } from './utils/slash-dispatch-utils'
 
+// Desktop drawer opens at this fraction of the viewport width (clamped to the
+// Drawer's own min/max). The user can still resize (persisted per DRAWER_WIDTH_KEY).
+const DRAWER_DEFAULT_WIDTH_RATIO = 0.5
+// Bump the suffix whenever the default policy changes so previously-persisted
+// widths (e.g. the old fixed 750px / earlier 30% default) reset on next open.
+const DRAWER_WIDTH_KEY = 'mingo-chat-width-v3'
+const DRAWER_DEFAULT_WIDTH_PX = 750 // SSR fallback before the viewport is known
+function drawerDefaultWidth(): number {
+  if (typeof window === 'undefined') return DRAWER_DEFAULT_WIDTH_PX
+  return Math.round(window.innerWidth * DRAWER_DEFAULT_WIDTH_RATIO)
+}
+
 
 // =============================================================================
 // Types
@@ -806,7 +818,7 @@ function SourceChips({
         Sources
       </span>
       <div
-        className={`flex flex-wrap gap-1.5 ${expanded ? 'max-h-[200px] overflow-y-auto' : ''}`}
+        className={`flex flex-wrap gap-1.5 ${expanded ? 'max-h-[200px] overflow-y-auto overscroll-contain' : ''}`}
       >
         {cited.map((src) => (
           <SourceChip
@@ -2515,8 +2527,8 @@ function EmbeddableChatInner({
           resizable
           minSize={480}
           maxSize={1600}
-          defaultSize={750}
-          storageKey="mingo-chat-width"
+          defaultSize={drawerDefaultWidth()}
+          storageKey={DRAWER_WIDTH_KEY}
           resizeAriaLabel="Resize chat panel"
           overlayClassName="mingo-chat-overlay"
           aria-describedby={undefined}

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

@@ -5,7 +5,7 @@ import { cn } from '../../utils/cn'
 import { MingoIcon } from '../icons'
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade'
 import { Skeleton } from '../ui/skeleton'
-import { ChatQuickActionRow } from './chat-quick-action-row'
+import { QuickActionWall } from './quick-action-wall'
 import { EntityIcon } from '../icon-display'
 import { accentFromIdentityIcon, type QuickActionAccent } from './quick-action-chip'
 
@@ -103,9 +103,11 @@ export function GuideWelcome({
   // direction. (Same behaviour as MingoWelcome.)
   const { scrollRef, fadeTop, fadeBottom, update: updateScrollFade } = useScrollFade<HTMLDivElement>()
 
-  // Map to the shared `ChatQuickActionRow` chip shape. In `wrap` mode every chip
-  // renders (no overflow), and `onHoverStart`/`onHoverEnd` drive the composer
-  // prompt preview.
+  // Map to the shared {@link QuickActionChip} shape consumed by the unified
+  // `QuickActionWall` — the SAME chip wall the website hero + deck render, so
+  // the chat's quick actions read as "the work the agent does". Every chip
+  // stays interactive (clone copies included); `onHoverStart`/`onHoverEnd` drive
+  // the composer prompt preview and `onSelect` sends.
   const chipItems = React.useMemo(
     () =>
       quickActions.map((action) => ({
@@ -142,7 +144,7 @@ export function GuideWelcome({
         <div
           ref={scrollRef}
           onScroll={updateScrollFade}
-          className="flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)] overflow-y-auto"
+          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
@@ -192,17 +194,24 @@ export function GuideWelcome({
         <ScrollFadeOverlay edge="bottom" visible={fadeBottom} className="h-12" />
       </div>
 
-      {/* Pinned quick-action chips above the composer — the shared
-          `ChatQuickActionRow` in `wrap` mode: ALL chips render (no "⋯" overflow
-          collapse) so every action is directly hoverable; hover/focus previews
-          the action's full prompt in the composer, click sends it. Capped height
-          + internal scroll (scrollbar-hide: scrollable, bar never shows) so a
-          long list can't squeeze the composer on short screens. */}
+      {/* Pinned quick-action wall above the composer — the shared
+          {@link QuickActionWall} in BRICK mode (the SAME "wall of the work
+          agents do" the website hero renders): up to 4 stacked row marquees,
+          chips packed edge-to-edge, drifting under left/right edge fades so a
+          long agent action set gets "reach" without squeezing the composer.
+          Chips stay directly hoverable — hover/focus previews the action's full
+          prompt in the composer, click sends it — and `pauseOnHover` freezes
+          the hovered row so a moving chip never dodges a click. */}
       {quickActions.length > 0 && (
-        <ChatQuickActionRow
-          wrap
+        <QuickActionWall
           chips={chipItems}
-          className="max-h-28 overflow-y-auto scrollbar-hide"
+          rows={4}
+          pauseOnHover
+          fade={['left', 'right']}
+          fadeSize={{ left: 32 }}
+          fadeColor="var(--color-bg)"
+          copyGap="var(--spacing-system-xxs)"
+          className="max-h-44 shrink-0"
         />
       )}
     </div>

package/src/components/chat/index.ts

@@ -15,8 +15,6 @@ export * from './chat-message-list'
 export * from './chat-message-row'
 export * from './chat-message-skeleton'
 
-export * from './chat-quick-action'
-export * from './chat-quick-action-row'
 export * from './quick-action-chip'
 export * from './quick-action-marquee'
 export * from './quick-action-wall'

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

@@ -341,7 +341,7 @@ export function MingoChatHistory({
         <div
           ref={scrollRef}
           onScroll={updateFade}
-          className="flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)] overflow-y-auto"
+          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

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

@@ -4,8 +4,8 @@ import * as React from 'react'
 import { cn } from '../../utils/cn'
 import { MingoIcon } from '../icons'
 import { MingoChatHistorySkeleton } from './mingo-chat-history'
-import { ChatQuickActionRow } from './chat-quick-action-row'
 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 { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon'
@@ -242,7 +242,7 @@ export function MingoWelcome({
       <div
         ref={scrollRef}
         onScroll={updateScrollFade}
-        className="flex flex-1 min-h-0 flex-col gap-[var(--spacing-system-m)] overflow-y-auto"
+        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
@@ -307,32 +307,46 @@ export function MingoWelcome({
         </div>
       )}
 
-      {/* Quick-action chips. "Start Guide Chat" stays pinned (the `leading`
-          slot — never collapses); any caller `quickActions` fit inline and the
-          rest collapse under a "⋯" overflow menu, width-measured like the
-          Autocomplete tag row. */}
+      {/* Quick actions. "Start Guide Chat" stays pinned above the wall — it's
+          the primary mode switch and must never scroll out of reach. The rest
+          render in the shared {@link QuickActionWall} in BRICK mode (the SAME
+          chip wall the website hero uses): 2 stacked row marquees under left/
+          right edge fades, so a long agent action set gets "reach" without
+          squeezing the composer. `pauseOnHover` freezes the hovered row so a
+          moving chip never dodges a click; hover/focus previews the action's
+          full prompt in the composer. */}
       {(onStartGuideChat || (quickActions && quickActions.length > 0)) && (
-        <ChatQuickActionRow
-          leading={
-            onStartGuideChat && (
-              <QuickActionChipButton
-                label="Start Guide Chat"
-                icon={<CompassIcon size={16} />}
-                variant={hasExistingChats ? 'outline' : 'primary'}
-                onSelect={onStartGuideChat}
-              />
-            )
-          }
-          chips={(quickActions ?? []).map((action) => ({
-            id: action.id,
-            label: action.label,
-            icon: action.icon,
-            variant: action.variant,
-            onSelect: action.onClick,
-            onHoverStart: () => onQuickActionHover?.(action),
-            onHoverEnd: () => onQuickActionHoverEnd?.(),
-          }))}
-        />
+        <div className="flex shrink-0 flex-col gap-[var(--spacing-system-xsf)]">
+          {onStartGuideChat && (
+            <QuickActionChipButton
+              label="Start Guide Chat"
+              icon={<CompassIcon size={16} />}
+              variant={hasExistingChats ? 'outline' : 'primary'}
+              onSelect={onStartGuideChat}
+              className="self-start"
+            />
+          )}
+          {quickActions && quickActions.length > 0 && (
+            <QuickActionWall
+              chips={quickActions.map((action) => ({
+                id: action.id,
+                label: action.label,
+                icon: action.icon,
+                variant: action.variant,
+                onSelect: action.onClick,
+                onHoverStart: () => onQuickActionHover?.(action),
+                onHoverEnd: () => onQuickActionHoverEnd?.(),
+              }))}
+              rows={4}
+              pauseOnHover
+              fade={['left', 'right']}
+              fadeSize={{ left: 32 }}
+              fadeColor="var(--color-bg)"
+              copyGap="var(--spacing-system-xxs)"
+              className="max-h-44 shrink-0"
+            />
+          )}
+        </div>
       )}
       </div>
       )}

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

@@ -299,3 +299,80 @@ export function QuickActionChipButton({
     </button>
   )
 }
+
+// =============================================================================
+// Chip data shape + data→button mapper
+// =============================================================================
+
+/**
+ * THE quick-action chip DATA shape — one declarative description of a chip that
+ * every quick-action surface builds (chat empty states, {@link QuickActionWall},
+ * {@link QuickActionMarquee}). Maps 1:1 to {@link QuickActionChipButton} props
+ * via {@link QuickActionChipFromData}, so adding a chip capability means editing
+ * exactly these two.
+ */
+export interface QuickActionChip {
+  /** Stable React key + menu-item id. */
+  id: string
+  label: string
+  /** Pre-rendered node OR a declarative {@link QuickActionIconSpec} (resolved
+   *  via the unified `<EntityIcon>` path). */
+  icon?: React.ReactNode | QuickActionIconSpec
+  /** Caller-supplied {@link QuickActionThemeSpec} (accent + optional
+   *  lozenge) — per-chip so mixed walls (interleaved IT/SEC streams) work.
+   *  The lib ships no theme registry; consumers define their own specs. */
+  theme?: QuickActionThemeSpec
+  /** Classification affix at the label's leading edge; `true` = the theme's. */
+  lozenge?: QuickActionChipLozenge | boolean
+  /** `'primary'` = accent (yellow) chip, `'outline'` = bordered chip (default). */
+  variant?: 'primary' | 'outline'
+  /** Active single-select state — renders the accented `selected` skin
+   *  (overrides `variant`). */
+  selected?: boolean
+  /** Accent for the `selected` skin (`'cyan'` = cyan twin, else pink). */
+  selectedAccent?: QuickActionAccent
+  onSelect?: () => void
+  /** Pointer/keyboard focus enters the chip — e.g. preview the full prompt in
+   *  the composer. */
+  onHoverStart?: () => void
+  /** Pointer/keyboard focus leaves the chip — e.g. restore the composer. */
+  onHoverEnd?: () => void
+}
+
+/**
+ * THE {@link QuickActionChip}-data → {@link QuickActionChipButton} mapper —
+ * one prop-plumbing spelling shared by every chat empty state, `QuickActionWall`,
+ * and `QuickActionMarquee` (adding a chip field means editing exactly here).
+ * `defaultTheme`/`defaultLozenge` fill gaps for wall-level theming;
+ * `interactive={false}` renders the decorative Tag form (loop-clone copies).
+ */
+export function QuickActionChipFromData({
+  chip,
+  defaultTheme,
+  defaultLozenge,
+  interactive = true,
+  className,
+}: {
+  chip: QuickActionChip
+  defaultTheme?: QuickActionThemeSpec
+  defaultLozenge?: boolean
+  interactive?: boolean
+  className?: string
+}) {
+  return (
+    <QuickActionChipButton
+      label={chip.label}
+      icon={chip.icon}
+      theme={chip.theme ?? defaultTheme}
+      lozenge={chip.lozenge ?? (defaultLozenge || undefined)}
+      variant={chip.variant ?? 'outline'}
+      selected={chip.selected}
+      selectedAccent={chip.selectedAccent}
+      onSelect={chip.onSelect}
+      onHoverStart={chip.onHoverStart}
+      onHoverEnd={chip.onHoverEnd}
+      interactive={interactive}
+      className={className}
+    />
+  )
+}

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

@@ -2,8 +2,7 @@
 
 import * as React from 'react'
 import type { MarqueeSyncController } from '../ui/marquee-wall'
-import type { QuickActionIconSpec } from './quick-action-chip'
-import type { QuickActionChip } from './chat-quick-action-row'
+import type { QuickActionIconSpec, QuickActionChip } from './quick-action-chip'
 import { QuickActionWall } from './quick-action-wall'
 
 // =============================================================================

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

@@ -9,10 +9,12 @@ import {
   type MarqueeWallFadeEdge,
   type MarqueeWallProps,
 } from '../ui/marquee-wall'
-import { QuickActionChipSkeleton } from './quick-action-chip'
-import type { QuickActionThemeSpec } from './quick-action-chip'
-import { QuickActionChipFromData } from './chat-quick-action-row'
-import type { QuickActionChip } from './chat-quick-action-row'
+import {
+  QuickActionChipSkeleton,
+  QuickActionChipFromData,
+  type QuickActionThemeSpec,
+  type QuickActionChip,
+} from './quick-action-chip'
 
 // =============================================================================
 // Shared wall constants

package/src/components/chat/slash-command-suggestions.tsx

@@ -79,7 +79,7 @@ export function SlashCommandSuggestions({
       role="menu"
       aria-label="Slash command suggestions"
       className={cn(
-        'absolute bottom-full mb-2 left-0 right-0 z-50 max-h-96 overflow-y-auto',
+        'absolute bottom-full mb-2 left-0 right-0 z-50 max-h-96 overflow-y-auto overscroll-contain',
         'rounded-md border border-ods-border bg-ods-card shadow-lg',
         className,
       )}

package/src/components/chat/tool-call-blocks.tsx

@@ -10,7 +10,7 @@ import { formatToolArgValue, formatToolResult } from "./utils/tool-call-helpers"
  * scale, no transform) — the token this file was originally flagged for.
  */
 const CODE_PRE_CLASS =
-  "bg-ods-bg border border-ods-border rounded-md p-[var(--spacing-system-sf)] w-full max-h-64 overflow-auto text-code text-ods-text-primary whitespace-pre"
+  "bg-ods-bg border border-ods-border rounded-md p-[var(--spacing-system-sf)] w-full max-h-64 overflow-auto overscroll-contain text-code text-ods-text-primary whitespace-pre"
 
 /**
  * Single arg row: inline `key: value` or labeled `<pre>` block.

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

@@ -582,21 +582,6 @@ export interface ModelUsageBreakdown {
   haikuSummarizer?: { input: number; output: number }
 }
 
-// ========== Chat Quick Action Props ==========
-
-export interface ChatQuickActionProps extends HTMLAttributes<HTMLButtonElement> {
-  text: string
-  icon?: React.ReactNode
-  onAction?: (text: string) => void
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
-  /** Whether this action should show the hint animation */
-  isHintActive?: boolean
-  /** Callback when user clicks the action - stops hint */
-  onHintInteraction?: () => void
-  disabled?: boolean
-  loading?: boolean
-}
-
 // ========== Dialog Item Props ==========
 
 export interface DialogItem {

package/src/hooks/.index.md

@@ -9,7 +9,6 @@ Central barrel export file for the hooks package, re-exporting all custom React
 | `./platform` | Platform-specific hooks |
 | `./use-toast` | Toast notification hook |
 | `./use-contact-submission` | Contact form submission hook |
-| `./use-quick-action-hint` | Quick action hint display hook |
 | `./use-copy-to-clipboard` | Clipboard write hook |
 | `./use-batch-images` | Authenticated batch image loading |
 | `./use-authenticated-image` | Single authenticated image hook |

package/src/hooks/index.ts

@@ -3,7 +3,6 @@ export * from './ui'
 export * from './platform'
 export * from './use-toast'
 export * from './use-contact-submission'
-export * from './use-quick-action-hint'
 export * from './use-copy-to-clipboard'
 
 // Image authentication hooks

package/src/stories/ChatContainer.stories.tsx

@@ -9,11 +9,8 @@ import {
 } from '../components/chat/chat-container'
 import { ChatInput } from '../components/chat/chat-input'
 import { ChatMessageList } from '../components/chat/chat-message-list'
-import {
-  ChatQuickActionRow,
-  ChatQuickActionRowSkeleton,
-  type QuickActionChip,
-} from '../components/chat/chat-quick-action-row'
+import { QuickActionWall } from '../components/chat/quick-action-wall'
+import type { QuickActionChip } from '../components/chat/quick-action-chip'
 import { ModelDisplay, ModelDisplaySkeleton } from '../components/chat/model-display'
 import type { Message } from '../components/chat/types/message.types'
 import { cn } from '../utils/cn'
@@ -145,13 +142,19 @@ function FaeChatShell({
         />
       </ChatContent>
       <ChatFooter fullWidth={fullWidth}>
-        {/* Quick-action chips above the composer — real row by default, skeleton
-            placeholder in the loading variant (same pattern as ModelDisplay). */}
-        {modelLoading ? (
-          <ChatQuickActionRowSkeleton className="mb-[var(--spacing-system-s)]" />
-        ) : (
-          <ChatQuickActionRow className="mb-[var(--spacing-system-s)]" chips={SAMPLE_QUICK_ACTIONS} />
-        )}
+        {/* Quick actions above the composer — the shared `QuickActionWall`
+            (its own 1:1 skeleton drives the loading variant, same pattern as
+            ModelDisplay). */}
+        <QuickActionWall
+          className="mb-[var(--spacing-system-s)] max-h-28"
+          chips={SAMPLE_QUICK_ACTIONS}
+          loading={modelLoading}
+          rows={2}
+          fade={['left', 'right']}
+          fadeSize={{ left: 32 }}
+          fadeColor="var(--color-bg)"
+          copyGap="var(--spacing-system-xxs)"
+        />
         <ChatInput
           onSend={handleSend}
           placeholder="Message Fae..."

package/src/stories/QuickActionWall.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { QuickActionWall, interleave } from '../components/chat/quick-action-wall'
-import type { QuickActionChip } from '../components/chat/chat-quick-action-row'
-import type { QuickActionThemeSpec } from '../components/chat/quick-action-chip'
+import type { QuickActionChip, QuickActionThemeSpec } from '../components/chat/quick-action-chip'
 
 // Theme specs are CALLER-supplied (the lib ships no registry, no fallbacks):
 // these are this story's own demo specs — real consumers resolve agent