@flamingo-stack/openframe-frontend-core 0.0.216 → 0.0.217-snapshot.20260601151546

package/src/components/tickets/ticket-reply-composer.tsx

@@ -0,0 +1,195 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+import { Button } from './../ui/button'
+import { Textarea } from './../ui/textarea'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from './../ui/alert-dialog'
+import { ChatInput } from './../chat/chat-input'
+import {
+  ChatAttachmentAddButton,
+  ChatAttachmentChipStrip,
+} from './../chat/chat-attachment-bar'
+import { useChatAttachments } from './../chat/hooks/use-chat-attachments'
+import type { AnyTicket } from './types'
+import { TICKET_TEXT_MAX_CHARS } from './types'
+import type { TicketDetailDrawerProps, TicketRef } from './ticket-detail-drawer'
+
+export interface TicketReplyComposerProps {
+  ticket: AnyTicket
+  busy: boolean
+  supportSystemDown: boolean
+  onSendMessage: TicketDetailDrawerProps['onSendMessage']
+  onClose: TicketDetailDrawerProps['onClose']
+}
+
+/**
+ * Open-ticket reply composer — REUSES the exact same layout as the global
+ * Ask-AI chat composer (`embeddable-chat.tsx`): the shared `<ChatInput>` with
+ * the staged-file chip strip above it and the attachment `+` button in a
+ * controls row BELOW the input (identical placement to the global chat), plus
+ * the destructive close-confirm `AlertDialog`.
+ *
+ * Replaces the former `OpenActions` raw-`<Textarea>` composer. The text lives
+ * inside `ChatInput`; this component owns only the attachment bag + the close
+ * dialog. Send semantics:
+ *   - `sending={busy || hasInflightUploads}` disables the input while sending
+ *     OR uploading (same as the global chat); `allowEmptySend` lets an
+ *     attachments-only reply send once uploads finish;
+ *   - the typed draft + staged files survive a FAILED send: `handleSend`
+ *     returns `false`, so `ChatInput` keeps the text and we only `clear()` the
+ *     attachments on success;
+ *   - close does NOT collapse the drawer (no `onActionCollapsed`).
+ *
+ * `disabled={supportSystemDown}` is the only flag that drives the "Connection
+ * lost…" placeholder. The `+` attach gate stays `!supportSystemDown` (same gate
+ * the old composer used).
+ */
+export function TicketReplyComposer({
+  ticket,
+  busy,
+  supportSystemDown,
+  onSendMessage,
+  onClose,
+}: TicketReplyComposerProps) {
+  const [resolution, setResolution] = useState('')
+  const [closeDialogOpen, setCloseDialogOpen] = useState(false)
+  const attachments = useChatAttachments()
+
+  const ticketRef: TicketRef = { id: ticket.id, external_id: ticket.external_id }
+  const hasReadyFiles = attachments.readyAttachments.length > 0
+
+  const handleSend = useCallback(
+    async (text: string): Promise<boolean> => {
+      const ref: TicketRef = { id: ticket.id, external_id: ticket.external_id }
+      const ok = await onSendMessage(ref, text.trim(), attachments.readyAttachments)
+      if (ok) attachments.clear()
+      return ok
+    },
+    // Depend on the reactive projections, not the whole bag (a fresh object each
+    // render). `readyAttachments` is memo-stable; `clear` is callback-stable.
+    [
+      onSendMessage,
+      ticket.id,
+      ticket.external_id,
+      attachments.readyAttachments,
+      attachments.clear,
+    ],
+  )
+
+  const confirmClose = async () => {
+    setCloseDialogOpen(false)
+    await onClose(ticketRef, resolution.trim() || undefined)
+    setResolution('')
+    // Intentionally NO `onActionCollapsed()` — collapsing the drawer after a
+    // close dismisses the ticket the user is working on (PR #1053). The
+    // optimistic in-place status update keeps the row mounted with the new
+    // badge; that is the only feedback needed.
+  }
+
+  const disabled = busy || supportSystemDown
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* Unified composer — mirrors the global Ask-AI chat layout
+          (embeddable-chat.tsx :1160-1206): compact staged-file chip strip
+          above, the shared <ChatInput> (Send icon = the PRIMARY action), then a
+          quiet bottom toolbar: attachment "+" on the left, and a LOW-EMPHASIS
+          "Close ticket" text button on the right. Closing is reversible (Reopen
+          exists), so it is NOT styled as destructive/danger — that would
+          over-signal a routine, undoable status change (UX best practice:
+          reserve red for irreversible actions). */}
+      <ChatAttachmentChipStrip
+        attachments={attachments.attachments}
+        onRemove={attachments.removeAttachment}
+        disabled={disabled}
+        size="compact"
+      />
+      <ChatInput
+        fullWidth
+        // Focus the reply box when the drawer opens so the customer can type
+        // immediately. `ChatInput`'s autoFocus uses `{ preventScroll: true }`,
+        // so this does NOT scroll the page — the card's smooth scroll-to-top
+        // (HelpCenterCard) wins, and the input stays focused + visible (it
+        // sits within the viewport below the fixed-height feed).
+        autoFocus
+        placeholder="Type a reply…"
+        sending={busy || attachments.hasInflightUploads}
+        disabled={supportSystemDown}
+        allowEmptySend={hasReadyFiles}
+        maxLength={TICKET_TEXT_MAX_CHARS}
+        onSend={handleSend}
+      />
+      <div className="flex items-center gap-2 w-full">
+        {!supportSystemDown && (
+          <ChatAttachmentAddButton
+            attachmentsEnabled
+            attachmentsCount={attachments.attachments.length}
+            onAddFiles={attachments.addFiles}
+            disabled={disabled}
+            size="compact"
+          />
+        )}
+        <div className="flex-1 min-w-0" />
+        <Button
+          type="button"
+          variant="transparent"
+          size="small"
+          onClick={() => setCloseDialogOpen(true)}
+          disabled={disabled}
+          className="text-ods-text-secondary hover:text-ods-text-primary"
+        >
+          Close ticket
+        </Button>
+      </div>
+
+      {/* Confirm dialog — collects an optional resolution note. Closing is
+          REVERSIBLE, so the confirm action is the standard accent primary, NOT
+          a red destructive button. */}
+      <AlertDialog open={closeDialogOpen} onOpenChange={setCloseDialogOpen}>
+        <AlertDialogContent className="bg-ods-card border-ods-border">
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-ods-text-primary">
+              Close this ticket?
+            </AlertDialogTitle>
+            <AlertDialogDescription className="text-ods-text-secondary">
+              Add an optional resolution note below. You can reopen the ticket
+              later if needed.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <Textarea
+            value={resolution}
+            onChange={(e) => setResolution(e.target.value)}
+            placeholder="Resolution (optional)"
+            rows={3}
+            maxLength={TICKET_TEXT_MAX_CHARS}
+            className="mt-2"
+          />
+          <AlertDialogFooter>
+            <AlertDialogCancel
+              disabled={busy}
+              className="bg-transparent border-ods-border text-ods-text-primary hover:bg-ods-border"
+            >
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => void confirmClose()}
+              disabled={busy}
+              className="bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover"
+            >
+              Close ticket
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}

package/src/components/tickets/types.ts

@@ -211,6 +211,20 @@ export interface MappedTicketActionError {
  */
 export const TICKET_TEXT_MAX_CHARS = 5000
 
+/**
+ * Live-refresh cadence (ms) for an OPEN ticket drawer. Drives BOTH
+ * surfaces that must stay current while the customer is looking at a
+ * ticket:
+ *   - the ticket LIST poll (`useTicketsList.refetchInterval`) → surfaces
+ *     out-of-band status / pipeline / priority / assignee changes;
+ *   - the CONVERSATION poll (`useTicketEngagements.refetchInterval`) →
+ *     surfaces new agent replies + attachments.
+ * Single source of truth so the two surfaces never drift. Both leave
+ * `refetchIntervalInBackground` at its default (false), so polling pauses
+ * on a hidden tab — no wasted requests when the user tabs away.
+ */
+export const TICKET_LIVE_POLL_MS = 8000
+
 /**
  * Centralized toast copy. Keep all wording here so QA / localization
  * can find every user-visible string in one file.

package/src/components/ui/ticket-attachments-list.tsx

@@ -16,10 +16,15 @@ export interface TicketAttachment {
 export interface TicketAttachmentsListProps {
   attachments: TicketAttachment[]
   className?: string
+  /** `compact` shrinks padding / icon / text / download-button for
+   *  in-message rendering (the ticket conversation feed). Default keeps the
+   *  roomier full-row layout for any other surface. */
+  size?: 'default' | 'compact'
 }
 
-export function TicketAttachmentsList({ attachments, className }: TicketAttachmentsListProps) {
+export function TicketAttachmentsList({ attachments, className, size = 'default' }: TicketAttachmentsListProps) {
   if (attachments.length === 0) return null
+  const compact = size === 'compact'
 
   return (
     <div className={cn("rounded-[6px] border border-ods-border overflow-hidden", className)}>
@@ -27,7 +32,8 @@ export function TicketAttachmentsList({ attachments, className }: TicketAttachme
         <div
           key={attachment.id}
           className={cn(
-            "flex items-center gap-4 px-4 py-3 bg-ods-card",
+            "flex items-center bg-ods-card",
+            compact ? "gap-2 px-2 py-1.5" : "gap-4 px-4 py-3",
             index < attachments.length - 1 && "border-b border-ods-border",
           )}
         >
@@ -35,17 +41,29 @@ export function TicketAttachmentsList({ attachments, className }: TicketAttachme
             <SquareAvatar
               src={attachment.thumbnailSrc}
               alt={attachment.fileName}
-              size="md"
+              size={compact ? "sm" : "md"}
               className="shrink-0"
             />
           ) : (
-            <div className="shrink-0 size-10 flex items-center justify-center rounded-[6px] bg-ods-card border border-ods-border">
-              <FileIcon className="size-6 text-ods-text-secondary" />
+            <div
+              className={cn(
+                "shrink-0 flex items-center justify-center rounded-[6px] bg-ods-card border border-ods-border",
+                compact ? "size-8" : "size-10",
+              )}
+            >
+              <FileIcon className={cn("text-ods-text-secondary", compact ? "size-4" : "size-6")} />
             </div>
           )}
           <div className="flex-1 min-w-0 overflow-hidden">
-            <p className="text-h4 text-ods-text-primary truncate" title={attachment.fileName}>{attachment.fileName}</p>
-            <p className="text-h6 text-ods-text-secondary">{attachment.fileSize}</p>
+            <p
+              className={cn("text-ods-text-primary truncate", compact ? "text-h5" : "text-h4")}
+              title={attachment.fileName}
+            >
+              {attachment.fileName}
+            </p>
+            {attachment.fileSize && (
+              <p className="text-h6 text-ods-text-secondary">{attachment.fileSize}</p>
+            )}
           </div>
           {attachment.onDownload && (
             <button
@@ -54,7 +72,7 @@ export function TicketAttachmentsList({ attachments, className }: TicketAttachme
               className="shrink-0 text-ods-text-secondary hover:text-ods-text-primary transition-colors"
               aria-label={`Download ${attachment.fileName}`}
             >
-              <Download className="size-6" />
+              <Download className={compact ? "size-4" : "size-6"} />
             </button>
           )}
         </div>

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/styles/app-globals.css

@@ -39,11 +39,24 @@ img {
 
 html {
   background-color: var(--color-bg);
+  /* Defense-in-depth for programmatic smooth scrolls (see
+     `utils/scroll-into-view.ts`). Browser SCROLL ANCHORING issues a synchronous
+     scrollTop correction when content is inserted/removed (e.g. a ticket drawer
+     expanding) to keep the anchored element stable — and per CSSOM-View that
+     correction ABORTS any in-flight scroll. That cancelled our smooth
+     scroll-to-card on every open after the first (anchoring is suppressed only
+     at scrollY=0, so the first open looked smooth and every repeat jumped).
+     Disabling anchoring on the document scroller removes the correction
+     entirely. Put on html/body (the page scroller), NOT a descendant — a child
+     can't re-enable it for an ancestor scroll container. The self-driven rAF
+     tween in scroll-into-view.ts is the primary fix; this is belt-and-braces. */
+  overflow-anchor: none;
 }
 
 body {
   background-color: var(--color-bg);
   color: var(--color-text-primary);
+  overflow-anchor: none;
 }
 
 /* Light mode specific styles (used in alternatives-list.tsx) */

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)
+  })
+})