@flamingo-stack/openframe-frontend-core 0.0.217 → 0.0.218

package/src/components/navigation/app-layout.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Suspense, useCallback, useState } from 'react'
+import { createContext, Suspense, useCallback, useContext, useState } from 'react'
 import { NavigationSidebarConfig } from '../../types/navigation'
 import { cn } from '../../utils'
 import { NotificationDrawer } from '../features/notifications/notification-drawer'
@@ -8,6 +8,18 @@ import { AppHeader, AppHeaderProps } from './app-header'
 import { MobileBurgerMenu, MobileBurgerMenuProps } from './mobile-burger-menu'
 import { NavigationSidebar } from './navigation-sidebar'
 
+/**
+ * Container element that wraps `<main>` and serves as the portal target for
+ * `AppLayoutDrawer`. Drawers rendered into this container sit on top of the
+ * main content area only — the sidebar and header remain visible and
+ * interactive. Null when AppLayout hasn't mounted (or when used outside of it).
+ */
+const AppLayoutDrawerContainerContext = createContext<HTMLElement | null>(null)
+
+export function useAppLayoutDrawerContainer(): HTMLElement | null {
+  return useContext(AppLayoutDrawerContainerContext)
+}
+
 export interface AppLayoutProps {
   children: React.ReactNode
   sidebarConfig: NavigationSidebarConfig
@@ -22,6 +34,13 @@ export interface AppLayoutProps {
    * (`children`) is not affected and stays fully interactive.
    */
   disabled?: boolean
+  /**
+   * Slot for an in-layout drawer (typically an `AppLayoutDrawer` tree). Rendered
+   * inside the layout's drawer-container context so the drawer can portal into
+   * the main-area container. Keeping it separate from `children` clarifies that
+   * the drawer is part of the layout chrome, not page content.
+   */
+  drawer?: React.ReactNode
 }
 
 export function AppLayout({
@@ -33,8 +52,10 @@ export function AppLayout({
   className,
   mobileBurgerMenuProps,
   disabled = false,
+  drawer,
 }: AppLayoutProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [drawerContainer, setDrawerContainer] = useState<HTMLDivElement | null>(null)
 
   const handleToggleMobileMenu = useCallback(() => {
     setMobileMenuOpen(prev => !prev)
@@ -45,34 +66,52 @@ export function AppLayout({
   }, [])
 
   return (
-    <div className={cn("flex h-screen bg-ods-bg", className)}>
-      <NavigationSidebar config={sidebarConfig} disabled={disabled} />
-      {/* Mobile Burger Menu - opens below header */}
-      <MobileBurgerMenu
-        {...mobileBurgerMenuProps}
-        isOpen={mobileMenuOpen}
-        onClose={handleCloseMobileMenu}
-        config={sidebarConfig}
-        disabled={disabled}
-      />
-
-      {/* Main Content Area */}
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <AppHeader
-          {...headerProps}
-          isMobileMenuOpen={mobileMenuOpen}
-          onToggleMobileMenu={handleToggleMobileMenu}
+    <AppLayoutDrawerContainerContext.Provider value={drawerContainer}>
+      <div className={cn("flex h-screen bg-ods-bg", className)}>
+        <NavigationSidebar config={sidebarConfig} disabled={disabled} />
+        {/* Mobile Burger Menu - opens below header */}
+        <MobileBurgerMenu
+          {...mobileBurgerMenuProps}
+          isOpen={mobileMenuOpen}
+          onClose={handleCloseMobileMenu}
+          config={sidebarConfig}
           disabled={disabled}
         />
-        <NotificationDrawer />
 
-        {/* Main Content */}
-        <main className={cn("flex-1 overflow-y-auto", mainClassName)}>
-          <Suspense fallback={loadingFallback ?? null}>
-            {children}
-          </Suspense>
-        </main>
+        {/* Main Content Area */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          <AppHeader
+            {...headerProps}
+            isMobileMenuOpen={mobileMenuOpen}
+            onToggleMobileMenu={handleToggleMobileMenu}
+            disabled={disabled}
+          />
+          <NotificationDrawer />
+
+          {/* Main + AppLayoutDrawer portal target. `relative` so the drawer
+              can absolutely position within just this area (not over
+              header/sidebar); `overflow-hidden` clips the drawer's slide-in
+              animation visually AND contains layout overflow so it doesn't
+              propagate up to <html>. (Scroll-snap-back below handles the
+              browser's programmatic scroll-on-focus side effect.) */}
+          <div
+            ref={setDrawerContainer}
+            className="flex-1 flex flex-col relative overflow-hidden"
+          >
+            <main className={cn("flex-1 overflow-y-auto", mainClassName)}>
+              <Suspense fallback={loadingFallback ?? null}>
+                {children}
+              </Suspense>
+            </main>
+            {/* `drawer` slot — rendered here so it sits inside the
+                AppLayoutDrawerContainerContext and can portal into this exact
+                container. Mount location is irrelevant for visual placement
+                (Radix Portal handles that), but keeping it close to the target
+                makes the React tree match the visual nesting. */}
+            {drawer}
+          </div>
+        </div>
       </div>
-    </div>
+    </AppLayoutDrawerContainerContext.Provider>
   )
 }

package/src/components/navigation/header-mingo-button.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import React from 'react'
+import { cn } from '../../utils/cn'
+import { MingoIcon } from '../icons'
+
+export interface HeaderMingoButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Active/pressed state — set to `true` while the Mingo drawer is open. */
+  isActive?: boolean
+  /** When true, hides the "Mingo AI" label and renders only the icon (so the
+   *  control collapses to a square `HeaderButton`-sized affordance on narrow
+   *  viewports). Defaults to `false`. */
+  iconOnly?: boolean
+  className?: string
+}
+
+/**
+ * "Mingo AI" launcher button for `AppHeader`. Mirrors the `HeaderButton`
+ * visual contract (sticky header height, `ods-card` rest / `ods-bg-hover`
+ * hover / `ods-bg-active` active, divider via `AppHeader`'s `divide-x`), but
+ * carries both the Mingo logo and the bold "Mingo AI" wordmark.
+ *
+ * Figma: 7532:222103 — `button-full`.
+ */
+export function HeaderMingoButton({
+  isActive = false,
+  iconOnly = false,
+  className,
+  ...props
+}: HeaderMingoButtonProps) {
+  return (
+    <button
+      type="button"
+      aria-label="Mingo AI"
+      aria-pressed={isActive}
+      className={cn(
+        'flex items-center shrink-0 h-full gap-2 px-4',
+        'transition-colors duration-200',
+        'focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent',
+        isActive
+          ? 'text-ods-text-primary bg-ods-bg-active'
+          : 'text-ods-text-primary bg-ods-card hover:bg-ods-bg-hover',
+        className,
+      )}
+      {...props}
+    >
+      <MingoIcon className="w-6 h-6 shrink-0" />
+      {!iconOnly && (
+        <span className="text-h3 font-bold tracking-[-0.36px] whitespace-nowrap">
+          Mingo AI
+        </span>
+      )}
+    </button>
+  )
+}
+
+export default HeaderMingoButton

package/src/components/navigation/index.ts

@@ -25,15 +25,31 @@ export type { NavigationSidebarProps } from './navigation-sidebar'
 export { AppHeader } from './app-header'
 export type { AppHeaderProps } from './app-header'
 
-export { AppLayout } from './app-layout'
+export { AppLayout, useAppLayoutDrawerContainer } from './app-layout'
 export type { AppLayoutProps } from './app-layout'
 
+export {
+  AppLayoutDrawer,
+  AppLayoutDrawerTrigger,
+  AppLayoutDrawerClose,
+  AppLayoutDrawerContent,
+  AppLayoutDrawerHeader,
+  AppLayoutDrawerTitle,
+  AppLayoutDrawerDescription,
+  AppLayoutDrawerBody,
+  AppLayoutDrawerFooter,
+} from './app-layout-drawer'
+export type { AppLayoutDrawerContentProps } from './app-layout-drawer'
+
 export { MobileBurgerMenu } from './mobile-burger-menu'
 export type { MobileBurgerMenuProps } from './mobile-burger-menu'
 
 export { HeaderButton } from './header-button'
 export type { HeaderButtonProps } from './header-button'
 
+export { HeaderMingoButton } from './header-mingo-button'
+export type { HeaderMingoButtonProps } from './header-mingo-button'
+
 export { HeaderGlobalSearch } from './header-global-search'
 export type { HeaderGlobalSearchProps } from './header-global-search'
 

package/src/components/tickets/hooks/use-ticket-engagements.ts

@@ -88,13 +88,18 @@ export function useTicketEngagements(
   const identity = useChatIdentity()
   const identityKey = identity.user?.email ?? 'anon'
 
-  const queryEnabled =
+  // "Will this ticket fetch its timeline once identity is ready?" — i.e. it's a
+  // real, non-optimistic ticket the caller enabled. INDEPENDENT of whether
+  // identity has resolved yet, so the loading state is correct from the very
+  // first render (before `useChatIdentity` settles).
+  const fetchable =
     enabled &&
-    identity.authTier !== 'anon' &&
-    !!identity.user?.email &&
     !!externalTicketId &&
     !externalTicketId.startsWith('temp-') // optimistic placeholders have no real id yet
 
+  const queryEnabled =
+    fetchable && identity.authTier !== 'anon' && !!identity.user?.email
+
   const query = useQuery({
     queryKey: ['ticket-engagements', externalTicketId, identityKey],
     enabled: queryEnabled,
@@ -126,7 +131,22 @@ export function useTicketEngagements(
 
   return {
     engagements: query.data ?? [],
-    isLoading: queryEnabled && query.isLoading,
+    // Loading-state truth that prevents the "body → blink → skeleton → data"
+    // double-flash. The bug: `useChatIdentity` starts at anon defaults and
+    // resolves async, so on the first render `queryEnabled` is false and the
+    // OLD `queryEnabled && query.isLoading` returned FALSE — the panel rendered
+    // the ticket body, THEN identity resolved, the query enabled, isLoading
+    // flipped true → skeleton appeared (the blink), then data landed.
+    //
+    // Fix: for a fetchable ticket we are "loading" whenever we don't yet have
+    // the timeline to show — that includes the window while identity is still
+    // resolving (so we skeleton from the FIRST render, never the body) AND the
+    // cold query fetch (`data === undefined`). A background poll keeps
+    // `query.data` defined, so it never re-flashes the skeleton. Non-fetchable
+    // (optimistic/disabled) or a resolved-anon viewer → not loading.
+    isLoading:
+      fetchable &&
+      (identity.isLoading || (queryEnabled && query.data === undefined)),
     isFetching: query.isFetching,
     error: (query.error as Error | null) ?? null,
     refetch: () => {

package/src/stories/AppLayoutDrawer.stories.tsx

@@ -0,0 +1,228 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { useState } from 'react'
+import { fn } from 'storybook/test'
+
+import {
+  BracketCurlyIcon,
+  ChartDonutIcon,
+  IdCardIcon,
+  MonitorIcon,
+  Settings02Icon,
+} from '../components/icons-v2-generated'
+import {
+  AppLayout,
+  AppLayoutDrawer,
+  AppLayoutDrawerBody,
+  AppLayoutDrawerContent,
+  AppLayoutDrawerDescription,
+  AppLayoutDrawerHeader,
+  AppLayoutDrawerTitle,
+} from '../components/navigation'
+import { Button } from '../components/ui/button'
+import { NavigationSidebarConfig } from '../types/navigation'
+
+const navigationItems: NavigationSidebarConfig['items'] = [
+  { id: 'dashboard', label: 'Dashboard', icon: <ChartDonutIcon size={24} />, path: '/dashboard', isActive: true },
+  { id: 'customers', label: 'Customers', icon: <IdCardIcon size={24} />, path: '/customers' },
+  { id: 'devices', label: 'Devices', icon: <MonitorIcon size={24} />, path: '/devices' },
+  { id: 'scripts', label: 'Scripts', icon: <BracketCurlyIcon size={24} />, path: '/scripts' },
+  { id: 'settings', label: 'Settings', icon: <Settings02Icon size={24} />, path: '/settings', section: 'secondary' },
+]
+
+const meta = {
+  title: 'Navigation/AppLayoutDrawer',
+  component: AppLayoutDrawer,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+A Drawer variant that renders **inside** AppLayout's main content area
+instead of as a viewport-level overlay. The sidebar and header remain
+visible and interactive while it is open.
+
+## When to use
+- Side panels (chat, details, filters) that should not cover the global
+  chrome (header, sidebar).
+- Anything that conceptually belongs to the current page rather than the
+  whole app.
+
+For an overlay that covers the entire viewport (e.g. notifications,
+auth modals), use the standard \`Drawer\` from \`components/ui\` instead.
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof AppLayoutDrawer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function DashboardChildren({ onOpenDrawer }: { onOpenDrawer: () => void }) {
+  return (
+    <div className="space-y-6 p-6">
+      <div>
+        <h1 className="text-2xl font-semibold text-ods-text-primary">Devices Overview</h1>
+        <p className="text-ods-text-secondary mt-1">8,250 Devices in Total</p>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {[
+          { label: 'Active Devices', value: '6,930' },
+          { label: 'Active Tickets', value: '136' },
+          { label: 'Resolved Tickets', value: '825' },
+        ].map((stat) => (
+          <div key={stat.label} className="p-4 bg-ods-card rounded-lg border border-ods-border">
+            <p className="text-sm text-ods-text-secondary">{stat.label}</p>
+            <p className="text-2xl font-semibold text-ods-text-primary mt-1">{stat.value}</p>
+          </div>
+        ))}
+      </div>
+      <Button onClick={onOpenDrawer}>Open in-layout drawer</Button>
+    </div>
+  )
+}
+
+/**
+ * Right-side in-layout drawer, passed via the `drawer` slot prop.
+ * The drawer is persistent — clicks on the overlay/header/sidebar
+ * do NOT close it; use the X button or Escape.
+ */
+export const Right: Story = {
+  render: function Render() {
+    const [open, setOpen] = useState(false)
+    return (
+      <AppLayout
+        sidebarConfig={{ items: navigationItems, onNavigate: fn(), onToggleMinimized: fn() }}
+        headerProps={{
+          showNotifications: true,
+          showUser: true,
+          userName: 'Mingo AI',
+          userEmail: 'mingo@openframe.dev',
+          onProfile: fn(),
+          onLogout: fn(),
+        }}
+        mobileBurgerMenuProps={{
+          user: {
+            userName: 'Mingo AI',
+            userEmail: 'mingo@openframe.dev',
+            userRole: 'Admin',
+          },
+        }}
+        drawer={
+          <AppLayoutDrawer open={open} onOpenChange={setOpen}>
+            <AppLayoutDrawerContent side="right">
+              <AppLayoutDrawerHeader>
+                <AppLayoutDrawerTitle>Current Chats</AppLayoutDrawerTitle>
+                <AppLayoutDrawerDescription>
+                  Persistent: clicks on AppLayout chrome don&apos;t close this.
+                </AppLayoutDrawerDescription>
+              </AppLayoutDrawerHeader>
+              <AppLayoutDrawerBody>
+                <p className="text-sm text-ods-text-secondary">Chat content goes here.</p>
+              </AppLayoutDrawerBody>
+            </AppLayoutDrawerContent>
+          </AppLayoutDrawer>
+        }
+      >
+        <DashboardChildren onOpenDrawer={() => setOpen(true)} />
+      </AppLayout>
+    )
+  },
+}
+
+/**
+ * Resizable variant — drag the inside edge to resize. Clamped to the
+ * AppLayout main-area dimensions (not the viewport).
+ */
+export const ResizableRight: Story = {
+  render: function Render() {
+    const [open, setOpen] = useState(true)
+    return (
+      <AppLayout
+        sidebarConfig={{ items: navigationItems, onNavigate: fn(), onToggleMinimized: fn() }}
+        headerProps={{
+          showNotifications: true,
+          showUser: true,
+          userName: 'Mingo AI',
+          userEmail: 'mingo@openframe.dev',
+          onProfile: fn(),
+          onLogout: fn(),
+        }}
+        mobileBurgerMenuProps={{
+          user: {
+            userName: 'Mingo AI',
+            userEmail: 'mingo@openframe.dev',
+            userRole: 'Admin',
+          },
+        }}
+        drawer={
+          <AppLayoutDrawer open={open} onOpenChange={setOpen}>
+            <AppLayoutDrawerContent
+              side="right"
+              resizable
+              minSize={360}
+              defaultSize={560}
+              storageKey="storybook:app-layout-drawer:right"
+            >
+              <AppLayoutDrawerHeader>
+                <AppLayoutDrawerTitle>Resizable Drawer</AppLayoutDrawerTitle>
+              </AppLayoutDrawerHeader>
+              <AppLayoutDrawerBody>
+                <p className="text-sm text-ods-text-secondary">
+                  Drag the grip on the left edge to resize. The panel can extend all
+                  the way to the container edge (minus a 16px symmetric gap).
+                </p>
+              </AppLayoutDrawerBody>
+            </AppLayoutDrawerContent>
+          </AppLayoutDrawer>
+        }
+      >
+        <DashboardChildren onOpenDrawer={() => setOpen(true)} />
+      </AppLayout>
+    )
+  },
+}
+
+/**
+ * Left-side variant.
+ */
+export const Left: Story = {
+  render: function Render() {
+    const [open, setOpen] = useState(false)
+    return (
+      <AppLayout
+        sidebarConfig={{ items: navigationItems, onNavigate: fn(), onToggleMinimized: fn() }}
+        headerProps={{
+          showNotifications: true,
+          showUser: true,
+          userName: 'Mingo AI',
+          userEmail: 'mingo@openframe.dev',
+          onProfile: fn(),
+          onLogout: fn(),
+        }}
+        mobileBurgerMenuProps={{
+          user: {
+            userName: 'Mingo AI',
+            userEmail: 'mingo@openframe.dev',
+            userRole: 'Admin',
+          },
+        }}
+        drawer={
+          <AppLayoutDrawer open={open} onOpenChange={setOpen}>
+            <AppLayoutDrawerContent side="left">
+              <AppLayoutDrawerHeader>
+                <AppLayoutDrawerTitle>Filters</AppLayoutDrawerTitle>
+              </AppLayoutDrawerHeader>
+              <AppLayoutDrawerBody>
+                <p className="text-sm text-ods-text-secondary">Left-side drawer content.</p>
+              </AppLayoutDrawerBody>
+            </AppLayoutDrawerContent>
+          </AppLayoutDrawer>
+        }
+      >
+        <DashboardChildren onOpenDrawer={() => setOpen(true)} />
+      </AppLayout>
+    )
+  },
+}

package/src/utils/.embed-authed-fetch.md

@@ -9,6 +9,13 @@ Drop-in replacement for `fetch()` that:
 - Delegates to `applyProxyAuth` to merge `Authorization` and `X-Chat-Act-As` headers — **proxy credentials always win** over caller-supplied headers
 - Defaults `Content-Type: application/json` when no headers are provided
 - Forces `credentials: 'same-origin'` to ensure Supabase auth cookies are included alongside bearer tokens
+- **Self-heals on `401`** when a host registered an `EmbedAuthAdapter` with a `refresh` callback: calls `refresh()` once, and on success retries the same request a single time with freshly-recomputed headers (so a rotated bearer is picked up). Concurrent 401s share ONE refresh. With no adapter / no `refresh`, the 401 passes through unchanged.
+
+### `setEmbedAuthAdapter(adapter | null)` + `EmbedAuthAdapter`
+Optional host-owned auth override registered at module level (one chat panel per app). The adapter can supply:
+- `getHeaders()` — headers merged onto every call AFTER proxy-auth (adapter wins), re-read per request so token rotation is seen
+- `credentials` — overrides the default `'same-origin'` (e.g. `'include'` for cross-origin cookie auth)
+- `refresh()` — `Promise<boolean>` 401 self-heal hook (see above). This lifts the openframe `apiClient`'s refresh-then-retry behaviour into the lib so embedded surfaces no longer need a host-side `window.fetch` monkey-patch to survive an expired token mid-session.
 
 ### `assertSameOrigin(url)` *(internal)*
 Defense-in-depth guard that:

package/src/utils/__tests__/embed-authed-fetch.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { embedAuthedFetch } from '../embed-authed-fetch'
+import { embedAuthedFetch, setEmbedAuthAdapter } from '../embed-authed-fetch'
 
 /**
  * Tests focus on the same-origin guard rather than the proxy-auth
@@ -11,9 +11,15 @@ describe('embedAuthedFetch.assertSameOrigin guard', () => {
 
   beforeEach(() => {
     globalThis.fetch = vi.fn(async () => new Response('ok')) as typeof fetch
+    // The cross-origin guard has a dev-mode escape hatch (warn + allow
+    // instead of throw) when `NODE_ENV !== 'production'` — see
+    // `embed-authed-fetch.ts`. Pin the env to production so these tests
+    // exercise the bearer-leak defense, not the dev convenience path.
+    vi.stubEnv('NODE_ENV', 'production')
   })
   afterEach(() => {
     globalThis.fetch = originalFetch
+    vi.unstubAllEnvs()
     vi.restoreAllMocks()
   })
 
@@ -64,3 +70,99 @@ describe('embedAuthedFetch.assertSameOrigin guard', () => {
     expect(spy).not.toHaveBeenCalled()
   })
 })
+
+describe('embedAuthedFetch 401 self-heal (adapter.refresh)', () => {
+  const originalFetch = globalThis.fetch
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch
+    setEmbedAuthAdapter(null)
+    vi.restoreAllMocks()
+  })
+
+  it('refreshes once then retries the request on a 401', async () => {
+    const fetchSpy = vi
+      .fn()
+      .mockResolvedValueOnce(new Response('nope', { status: 401 }))
+      .mockResolvedValueOnce(new Response('ok', { status: 200 }))
+    globalThis.fetch = fetchSpy as typeof fetch
+
+    const refresh = vi.fn(async () => true)
+    setEmbedAuthAdapter({ getHeaders: () => ({ Authorization: 'Bearer t' }), refresh })
+
+    const res = await embedAuthedFetch('/api/chat/x')
+    expect(res.status).toBe(200)
+    expect(refresh).toHaveBeenCalledTimes(1)
+    expect(fetchSpy).toHaveBeenCalledTimes(2)
+  })
+
+  it('surfaces the 401 (no retry) when refresh resolves false', async () => {
+    const fetchSpy = vi.fn(async () => new Response('nope', { status: 401 }))
+    globalThis.fetch = fetchSpy as typeof fetch
+
+    const refresh = vi.fn(async () => false)
+    setEmbedAuthAdapter({ refresh })
+
+    const res = await embedAuthedFetch('/api/chat/x')
+    expect(res.status).toBe(401)
+    expect(refresh).toHaveBeenCalledTimes(1)
+    expect(fetchSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not retry a second time when the refreshed token is also 401', async () => {
+    const fetchSpy = vi.fn(async () => new Response('nope', { status: 401 }))
+    globalThis.fetch = fetchSpy as typeof fetch
+
+    const refresh = vi.fn(async () => true)
+    setEmbedAuthAdapter({ refresh })
+
+    const res = await embedAuthedFetch('/api/chat/x')
+    expect(res.status).toBe(401)
+    // refresh fired once; the retry's 401 is surfaced rather than looping.
+    expect(refresh).toHaveBeenCalledTimes(1)
+    expect(fetchSpy).toHaveBeenCalledTimes(2)
+  })
+
+  it('de-dupes concurrent 401s into a single refresh', async () => {
+    const fetchSpy = vi
+      .fn()
+      .mockResolvedValueOnce(new Response('nope', { status: 401 }))
+      .mockResolvedValueOnce(new Response('nope', { status: 401 }))
+      .mockResolvedValue(new Response('ok', { status: 200 }))
+    globalThis.fetch = fetchSpy as typeof fetch
+
+    // A refresh that stays pending until we release it — so BOTH 401s are
+    // parked on the single shared slot before it settles. (If it resolved
+    // eagerly, the slot could clear between the two 401s and the test would
+    // race.)
+    let releaseRefresh: (v: boolean) => void = () => {}
+    const refreshGate = new Promise<boolean>((resolve) => {
+      releaseRefresh = resolve
+    })
+    const refresh = vi.fn(() => refreshGate)
+    setEmbedAuthAdapter({ refresh })
+
+    const p1 = embedAuthedFetch('/api/chat/a')
+    const p2 = embedAuthedFetch('/api/chat/b')
+
+    // Wait until both initial fetches have 401'd and reached the (still
+    // pending) refresh slot, then release it so both retries fire.
+    await vi.waitFor(() => expect(fetchSpy).toHaveBeenCalledTimes(2))
+    releaseRefresh(true)
+
+    const [r1, r2] = await Promise.all([p1, p2])
+    expect(r1.status).toBe(200)
+    expect(r2.status).toBe(200)
+    // Both 401s shared ONE refresh call.
+    expect(refresh).toHaveBeenCalledTimes(1)
+  })
+
+  it('passes a 401 through untouched when no adapter is registered', async () => {
+    const fetchSpy = vi.fn(async () => new Response('nope', { status: 401 }))
+    globalThis.fetch = fetchSpy as typeof fetch
+
+    const res = await embedAuthedFetch('/api/chat/x')
+    expect(res.status).toBe(401)
+    expect(fetchSpy).toHaveBeenCalledTimes(1)
+  })
+})