App: standardized overlay page scrollbar (GlobalOverlayScrollbars)

package.json

@@ -24,7 +24,7 @@
     "core:unlink": "yalc remove @flamingo-stack/openframe-frontend-core"
   },
   "dependencies": {
-    "@flamingo-stack/openframe-frontend-core": "^0.0.448",
+    "@flamingo-stack/openframe-frontend-core": "^0.0.457",
     "@hookform/resolvers": "^5.2.2",
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-query": "^5.90.16",

src/app/(app)/onboarding/components/mingo-step.tsx

@@ -2,9 +2,9 @@
 
 import {
   accentFromIdentityIcon,
-  ChatQuickActionRow,
   getAgentAccent,
   type QuickActionChip,
+  QuickActionWall,
   useEmptyStateConfig,
 } from '@flamingo-stack/openframe-frontend-core/components/chat';
 import { Video } from '@flamingo-stack/openframe-frontend-core/components/features';
@@ -31,7 +31,7 @@ const DEMO_VIDEO_ID = 'i4H_XqrI3RA';
  * keyed by `source = agent-mingo` — the "application type" we actually want. We select
  * it through the runtime's standard `aiAgentConfigUrl(slug)` seam (same `/content`
  * proxy, same flat wire shape), fetch it with the shared `useEmptyStateConfig`, and
- * render the first four through the SAME `ChatQuickActionRow` the chat empty state
+ * render the first four through the SAME `QuickActionWall` the chat empty state
  * (`GuideWelcome`) uses — with the identical icon-accent resolution, so the glyphs come
  * out turquoise (mingo → `cyan`) exactly like in the chat.
  *
@@ -104,7 +104,17 @@ export function MingoStep({
           {chips.length > 0 && (
             <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
               <p className="text-h5 text-ods-text-secondary">Try this quick actions:</p>
-              <ChatQuickActionRow wrap chips={chips} />
+              <QuickActionWall
+                chips={chips}
+                rows={4}
+                pauseOnHover
+                dragScroll
+                fade={['left', 'right']}
+                fadeSize={{ left: 32 }}
+                fadeColor="var(--color-bg)"
+                copyGap="var(--spacing-system-xxs)"
+                className="max-h-44 shrink-0"
+              />
             </div>
           )}
         </div>

src/app/layout.tsx

@@ -7,7 +7,7 @@ import { DevTicketObserver } from '@/app/(auth)/auth/components/dev-ticket-obser
 import { azeretMono, dmSans } from '@/lib/fonts';
 import { NatsAppProvider } from '@/lib/nats/nats-app-provider';
 import { sidebarWidthFoucScript } from '@/lib/navigation-sidebar-state';
-import { Toaster } from '@/lib/openframe-core-ui';
+import { GlobalOverlayScrollbars, Toaster } from '@/lib/openframe-core-ui';
 import { FeatureFlagsGate } from '../components/feature-flags-gate';
 import { RouteGuard } from '../components/route-guard';
 import { isAuthEnabled } from '../lib/app-mode';
@@ -138,6 +138,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           </QueryClientProvider>
         </RelayProvider>
         <Toaster />
+        {/* Standardized overlay scrollbar for the page scroller (desktop only) */}
+        <GlobalOverlayScrollbars />
       </body>
     </html>
   );