@flamingo-stack/openframe-frontend-core 0.0.717 → 0.0.719

package/src/components/features/remote-session/remote-desktop-view.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from 'react';
 import {
   ChatOffIcon,
   ChatTextIcon,
+  Chevron02DownIcon,
   Collapse02Icon,
   Expand02Icon,
   MonitorIcon,
@@ -19,8 +20,12 @@ import { RemoteDesktopFullscreenToolbar } from './remote-desktop-fullscreen-tool
 /** The page chrome both the view and its skeleton render in. */
 const PAGE_CLASS = 'h-full overflow-hidden px-[var(--spacing-system-l)] pb-[var(--spacing-system-l)]';
 
+/** The header card: the device row, and under it the display row when there is one to pick. */
 const CONTROLS_BAR_CLASS =
-  'flex flex-shrink-0 items-center justify-between gap-[var(--spacing-system-mf)] rounded-md border border-ods-border bg-ods-card px-[var(--spacing-system-mf)] py-[var(--spacing-system-xs)]';
+  'flex flex-shrink-0 flex-col overflow-hidden rounded-md border border-ods-border bg-ods-card';
+
+const CONTROLS_ROW_CLASS =
+  'flex items-center justify-between gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] py-[var(--spacing-system-xs)]';
 
 export interface RemoteDesktopViewProps {
   /** First line of the device header. */
@@ -36,9 +41,13 @@ export interface RemoteDesktopViewProps {
   fullscreen?: boolean;
   onEnterFullscreen: () => void;
   onExitFullscreen: () => void;
-  /** The display switcher's menu; the switcher is hidden while this is empty (a single display). */
+  /**
+   * The display switcher's menu, one entry per separate display. The switcher is
+   * the full-width row under the device row (Figma 2155:109503), and it is left
+   * out while this is empty: one display, or an agent that reports none.
+   */
   displayMenuGroups?: ActionsMenuGroup[];
-  /** The switcher's label, e.g. "Display All" or "Display 2". */
+  /** The switcher's label, e.g. "Display 2", or "Display" before the agent has named one. */
   currentDisplayLabel: string;
   actionsMenuGroups: ActionsMenuGroup[];
   onOpenSettings: () => void;
@@ -86,61 +95,73 @@ export function RemoteDesktopView({
 }: RemoteDesktopViewProps) {
   const controlsBar = (
     <div className={CONTROLS_BAR_CLASS}>
-      <div className="flex min-w-0 items-center gap-[var(--spacing-system-mf)]">
-        <div className="flex-shrink-0 rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)]">
-          <MonitorIcon className="h-4 w-4 text-ods-text-primary" />
-        </div>
-        <div className="flex min-w-0 flex-col">
-          <TruncateText>{deviceName}</TruncateText>
-          <TruncateText
-            variant="h6"
-            tone="secondary"
-          >{`Desktop • ${organizationName || 'Unknown Customer'}`}</TruncateText>
+      <div className={CONTROLS_ROW_CLASS}>
+        <div className="flex min-w-0 items-center gap-[var(--spacing-system-mf)]">
+          <div className="flex-shrink-0 rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)]">
+            <MonitorIcon className="h-4 w-4 text-ods-text-primary" />
+          </div>
+          <div className="flex min-w-0 flex-col">
+            <TruncateText>{deviceName}</TruncateText>
+            <TruncateText
+              variant="h6"
+              tone="secondary"
+            >{`Desktop • ${organizationName || 'Unknown Customer'}`}</TruncateText>
+          </div>
         </div>
-      </div>
-      <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]">
-        {displayMenuGroups.length > 0 && (
-          <ActionsMenuDropdown
-            groups={displayMenuGroups}
-            customTrigger={
-              <Button variant="outline" leftIcon={<MonitorIcon className="h-4 w-4 md:h-6 md:w-6" />}>
-                {/* A narrow page keeps the icon and drops the words: the bar never pushes the device's name out. */}
-                <span className="sr-only content-md:not-sr-only">{currentDisplayLabel}</span>
-              </Button>
-            }
+        <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]">
+          {onToggleChat && (
+            <Button
+              variant="outline"
+              onClick={onToggleChat}
+              leftIcon={
+                chatOpen ? (
+                  <ChatOffIcon className="h-4 w-4 md:h-6 md:w-6" />
+                ) : (
+                  <ChatTextIcon className="h-4 w-4 md:h-6 md:w-6" />
+                )
+              }
+            >
+              {/* A narrow page keeps the icon and drops the words: the bar never pushes the device's name out. */}
+              <span className="sr-only content-md:not-sr-only">{chatOpen ? 'Close Chat' : 'Open Chat'}</span>
+            </Button>
+          )}
+          <ActionsMenuDropdown groups={actionsMenuGroups} triggerAriaLabel="Actions" />
+          <Button
+            variant="outline"
+            size="icon"
+            aria-label="Settings"
+            onClick={onOpenSettings}
+            leftIcon={<Settings01Icon />}
           />
-        )}
-        {onToggleChat && (
           <Button
             variant="outline"
-            onClick={onToggleChat}
-            leftIcon={
-              chatOpen ? (
-                <ChatOffIcon className="h-4 w-4 md:h-6 md:w-6" />
-              ) : (
-                <ChatTextIcon className="h-4 w-4 md:h-6 md:w-6" />
-              )
-            }
-          >
-            <span className="sr-only content-md:not-sr-only">{chatOpen ? 'Close Chat' : 'Open Chat'}</span>
-          </Button>
-        )}
-        <ActionsMenuDropdown groups={actionsMenuGroups} triggerAriaLabel="Actions" />
-        <Button
-          variant="outline"
-          size="icon"
-          aria-label="Settings"
-          onClick={onOpenSettings}
-          leftIcon={<Settings01Icon />}
-        />
-        <Button
-          variant="outline"
-          size="icon"
-          aria-label={fullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
-          onClick={fullscreen ? onExitFullscreen : onEnterFullscreen}
-          leftIcon={fullscreen ? <Collapse02Icon /> : <Expand02Icon />}
-        />
+            size="icon"
+            aria-label={fullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+            onClick={fullscreen ? onExitFullscreen : onEnterFullscreen}
+            leftIcon={fullscreen ? <Collapse02Icon /> : <Expand02Icon />}
+          />
+        </div>
       </div>
+      {/* The monitor selector is a row of its own under the device row, the full
+          width of the card (Figma 2155:109503): the label never competes with the
+          device's name for the header's width. Hidden with one display or none. */}
+      {displayMenuGroups.length > 0 && (
+        <ActionsMenuDropdown
+          groups={displayMenuGroups}
+          align="start"
+          customTrigger={
+            <button
+              type="button"
+              aria-label="Switch display"
+              className="flex w-full items-center gap-[var(--spacing-system-xs)] border-t border-ods-border p-[var(--spacing-system-sf)] text-left text-ods-text-primary outline-none transition-colors hover:bg-ods-bg-hover focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus"
+            >
+              <MonitorIcon className="h-6 w-6 shrink-0" />
+              <span className="min-w-0 flex-1 truncate text-h4">{currentDisplayLabel}</span>
+              <Chevron02DownIcon className="h-6 w-6 shrink-0" />
+            </button>
+          }
+        />
+      )}
     </div>
   );
 
@@ -189,17 +210,19 @@ export function RemoteDesktopViewSkeleton({ onBack }: Pick<RemoteDesktopViewProp
   return (
     <PageLayout className={PAGE_CLASS} backButton={onBack ? { label: 'Back', onClick: onBack } : undefined}>
       <div className={CONTROLS_BAR_CLASS}>
-        <div className="flex min-w-0 items-center gap-[var(--spacing-system-mf)]">
-          <Skeleton className="h-9 w-9 flex-shrink-0 rounded-md" />
-          <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
-            <Skeleton className="h-5 w-48" />
-            <Skeleton className="h-4 w-36" />
+        <div className={CONTROLS_ROW_CLASS}>
+          <div className="flex min-w-0 items-center gap-[var(--spacing-system-mf)]">
+            <Skeleton className="h-9 w-9 flex-shrink-0 rounded-md" />
+            <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
+              <Skeleton className="h-5 w-48" />
+              <Skeleton className="h-4 w-36" />
+            </div>
+          </div>
+          <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]">
+            <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
+            <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
+            <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
           </div>
-        </div>
-        <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]">
-          <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
-          <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
-          <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
         </div>
       </div>
 

package/src/components/features/remote-session/remote-session-keep-modals.tsx

@@ -151,8 +151,8 @@ export interface ReleaseKeepingModalProps {
   keptOn: string;
   /** The reason as it reads in the sentence, e.g. "Client dispute". */
   reason: string;
-  /** The ticket or reference the Keep was placed for. */
-  ticket?: string | null;
+  /** The tickets assigned to the recording, as they read in the line, e.g. "TKT-4631"; the line is left out without any. */
+  tickets?: string[];
   /** When the recording will be deleted once released, formatted. */
   expiresOn: string;
   /** The original expiry date when it has already passed, so the release adds the grace period. */
@@ -169,7 +169,7 @@ export function ReleaseKeepingModal({
   keptBy,
   keptOn,
   reason,
-  ticket,
+  tickets = [],
   expiresOn,
   dueOn,
   isPending = false,
@@ -185,7 +185,7 @@ export function ReleaseKeepingModal({
         <p>
           Kept by {keptBy} on {keptOn} for {reason}.
         </p>
-        {ticket && <p>Ticket: {ticket}</p>}
+        {tickets.length > 0 && <p>Ticket: {tickets.join(', ')}</p>}
       </div>
 
       <KeepNotice icon={<HourglassIcon size={24} color="currentColor" />} title={`It will expire on ${expiresOn}`}>

package/src/components/features/remote-session/remote-session-ticket-modals.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { useState } from 'react';
+import { Autocomplete, type AutocompleteOption } from '../../ui/autocomplete';
+import { Button } from '../../ui/button/button';
+import { ModalV2, ModalV2Footer, ModalV2Header, ModalV2Title } from '../../ui/modal-v2';
+
+export interface AssignTicketModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /**
+   * The tickets that can be assigned: label = title, value = ticket id. Leave
+   * out the ones already assigned to the recording.
+   */
+  options: AutocompleteOption<string>[];
+  /** Server-side search: called with the typed text; the caller refreshes `options`. Client-side filtering otherwise. */
+  onSearch?: (query: string) => void;
+  /** The ticket search is in flight. */
+  loading?: boolean;
+  /** The assignment is in flight: the button spins and the dialog refuses to close. */
+  isPending?: boolean;
+  onConfirm: (ticketIds: string[]) => void;
+}
+
+/** Assign Ticket: links one or more tickets to a recording. */
+export function AssignTicketModal({
+  isOpen,
+  onClose,
+  options,
+  onSearch,
+  loading = false,
+  isPending = false,
+  onConfirm,
+}: AssignTicketModalProps) {
+  const [ticketIds, setTicketIds] = useState<string[]>([]);
+  // Titles of the picked tickets: a server-side search replaces `options`, and
+  // a picked ticket missing from the new results would otherwise show its id.
+  const [titles, setTitles] = useState<Record<string, string>>({});
+
+  // Every opening starts blank. Reset while rendering, not from an effect: the
+  // modal stays mounted when it closes, so an effect would paint the opening
+  // frame with the previous selection still in the field.
+  const [seededOpen, setSeededOpen] = useState(isOpen);
+  if (seededOpen !== isOpen) {
+    setSeededOpen(isOpen);
+    if (isOpen) {
+      setTicketIds([]);
+      setTitles({});
+    }
+  }
+
+  const handleChange = (ids: string[]) => {
+    setTicketIds(ids);
+    setTitles(prev => {
+      const next: Record<string, string> = {};
+      for (const id of ids) next[id] = options.find(option => option.value === id)?.label ?? prev[id] ?? id;
+      return next;
+    });
+  };
+
+  const handleAssign = () => {
+    if (ticketIds.length === 0 || isPending) return;
+    onConfirm(ticketIds);
+  };
+
+  return (
+    <ModalV2 isOpen={isOpen} onClose={isPending ? () => {} : onClose} className="text-left md:max-w-[600px]">
+      <ModalV2Header>
+        <ModalV2Title>Assign Ticket</ModalV2Title>
+      </ModalV2Header>
+
+      <Autocomplete
+        multiple
+        wrapTags
+        label="Tickets"
+        labelVariant="large"
+        options={options}
+        value={ticketIds}
+        onChange={handleChange}
+        renderTag={option => titles[option.value] ?? option.label}
+        onInputChange={onSearch ? (value, reason) => reason === 'input' && onSearch(value) : undefined}
+        disableClientFilter={Boolean(onSearch)}
+        loading={loading}
+        noOptionsText="No tickets found"
+        disabled={isPending}
+      />
+
+      <ModalV2Footer>
+        <Button type="button" variant="outline" onClick={onClose} disabled={isPending} className="flex-1 md:hidden">
+          Cancel
+        </Button>
+        <div className="hidden flex-1 md:block" />
+        <Button
+          type="button"
+          variant="accent"
+          onClick={handleAssign}
+          loading={isPending}
+          disabled={ticketIds.length === 0}
+          className="flex-1"
+        >
+          Assign
+        </Button>
+      </ModalV2Footer>
+    </ModalV2>
+  );
+}
+
+export interface UnassignTicketModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /** The unassignment is in flight: the button spins and the dialog refuses to close. */
+  isPending?: boolean;
+  onConfirm: () => void;
+}
+
+/** Unassign Ticket: unlinks a ticket from a recording; the ticket itself is unchanged. */
+export function UnassignTicketModal({ isOpen, onClose, isPending = false, onConfirm }: UnassignTicketModalProps) {
+  return (
+    <ModalV2 isOpen={isOpen} onClose={isPending ? () => {} : onClose} className="text-left md:max-w-[600px]">
+      <ModalV2Header>
+        <ModalV2Title>Unassign Ticket</ModalV2Title>
+      </ModalV2Header>
+
+      <p className="w-full text-ods-text-primary text-h4">
+        This Ticket will no longer be linked to this remote session. The ticket itself stays as it is, and you can
+        assign it again anytime.
+      </p>
+
+      <ModalV2Footer>
+        <Button type="button" variant="outline" onClick={onClose} disabled={isPending} className="flex-1 md:hidden">
+          Cancel
+        </Button>
+        <div className="hidden flex-1 md:block" />
+        <Button type="button" variant="destructive" onClick={onConfirm} loading={isPending} className="flex-1">
+          Unassign
+        </Button>
+      </ModalV2Footer>
+    </ModalV2>
+  );
+}

package/src/components/related-content/related-content-section.tsx

@@ -28,12 +28,12 @@
  * `renderSkeletonForType` so the placeholder height matches the loaded card
  * exactly (zero layout shift on resolve).
  *
- * One API call per content type via the shared list-URL builder
- * (`buildListUrl` — injectable; defaults to the lib's byte-parity-tested
- * builder prefixed with `apiBaseUrl`). Fetching uses `useSelfFetch` (plain
- * fetch, NO react-query) so third-party embedders need no QueryClientProvider;
- * cards are imported via DEEP module paths (not the chat barrel) so this
- * chunk never reaches `@tanstack/react-query`.
+ * One API call per page of a content type, carrying only that page's ids, via
+ * the shared list-URL builder (`buildListUrl` — injectable; defaults to the
+ * lib's byte-parity-tested builder prefixed with `apiBaseUrl`). Fetching uses
+ * `useSelfFetch` (plain fetch, NO react-query) so third-party embedders need
+ * no QueryClientProvider; cards are imported via DEEP module paths (not the
+ * chat barrel) so this chunk never reaches `@tanstack/react-query`.
  *
  * The per-type card + skeleton dispatch lives in `./card-registry`
  * (`RELATED_CARD_REGISTRY`): ONE entry per content type, each carrying that
@@ -49,7 +49,7 @@
  */
 
 import type React from 'react';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useSelfFetch } from '../../hooks/use-self-fetch';
 import type { ContentRef, ContentRefWithReason } from '../../types/content-ref';
 import {
@@ -246,23 +246,29 @@ function CardForType({
 }
 
 // =============================================================================
-// Fetch all items for a type in ONE server-sorted call, via the injectable
-// list-URL builder. `useSelfFetch` (URL = cache key) replaces the hub's old
-// react-query usage: `enabled` ≙ `url === null`, `!res.ok`/network error ≙
-// `error → items null → group renders nothing`. Accepted deltas vs
-// react-query: no retry/backoff, no focus refetch, no cross-mount cache.
+// Fetch ONE page of a group — only the ids on screen go into the list URL.
+// Pages already fetched are kept by url, so paging back renders without a
+// request. `useSelfFetch` replaces the hub's old react-query usage: `enabled`
+// ≙ `url === null` (no list API → `items: null`), `!res.ok`/network error ≙
+// an empty page. Accepted deltas vs react-query: no retry/backoff, no focus
+// refetch, no cross-mount cache.
 // =============================================================================
 
 function useGroupItems(type: string, refs: ContentRef[], buildUrl: (type: string, ids: string[]) => string | null) {
   const ids = refs.map(r => r.id);
   const url = ids.length > 0 ? buildUrl(type, ids) : null;
-  const { data, isLoading } = useSelfFetch<unknown>(url);
-  const items = data != null ? extractItems(data) : null;
-  return { items, isLoading };
+  const [pages, setPages] = useState<ReadonlyMap<string, unknown[]>>(() => new Map());
+  const cached = url !== null ? pages.get(url) : undefined;
+  const { data, dataUrl, error } = useSelfFetch<unknown>(cached ? null : url);
+  if (data != null && dataUrl !== null && !pages.has(dataUrl)) {
+    setPages(new Map(pages).set(dataUrl, extractItems(data)));
+  }
+  if (url === null) return { items: null, isLoading: false };
+  return { items: cached ?? (error ? [] : null), isLoading: !cached && !error };
 }
 
 // =============================================================================
-// Per-group renderer — one API call, server-sorted, then render cards via the
+// Per-group renderer — one API call per page, then render cards via the
 // dispatcher with per-type skeletons + per-type layout from CONTENT_REF_GROUPS.
 // =============================================================================
 
@@ -325,41 +331,33 @@ function ContentGroup({
    *  its heading too — no orphaned titles. */
   heading: React.ReactNode;
 }) {
-  const { items, isLoading } = useGroupItems(type, refs, buildUrl);
   const config = resolveGroupConfig(type);
   const isListLayout = config.layout === 'list';
   const cardSize = config.gridSize;
 
   // Per-group pagination for big groups (author pages): GROUP_PAGE_SIZE items
-  // per page with the standard Pagination control below the group. Client-side
-  // slicing — useGroupItems already fetched every row in one batched call, so
-  // page flips are instant. Hooks live above every early return (file
-  // convention). Page is clamped so a shrinking refs array (suggestion
-  // refetch) can never strand the view past the last page, and RESET when the
-  // ref set actually changes (shrink→grow must not return to a stale page).
+  // per page with the standard Pagination control below the group, each page
+  // fetched on its own. Back to page 1 whenever the ref set changes (a
+  // suggestion refetch can shrink it) — reset while rendering, so the stale
+  // page is never requested.
   const [page, setPage] = useState(1);
   const refsKey = refs.map(r => r.id).join('|');
-  const prevRefsKeyRef = useRef(refsKey);
-  useEffect(() => {
-    if (prevRefsKeyRef.current !== refsKey) {
-      prevRefsKeyRef.current = refsKey;
-      setPage(1);
-    }
-  }, [refsKey]);
+  const [pagedRefsKey, setPagedRefsKey] = useState(refsKey);
+  if (pagedRefsKey !== refsKey) {
+    setPagedRefsKey(refsKey);
+    setPage(1);
+  }
   const totalGroupPages = pageCount(refs.length, GROUP_PAGE_SIZE);
-  const safePage = Math.min(page, totalGroupPages);
-  const visibleGroupRefs =
-    refs.length > GROUP_PAGE_SIZE ? refs.slice((safePage - 1) * GROUP_PAGE_SIZE, safePage * GROUP_PAGE_SIZE) : refs;
+  const pageRefs = refs.slice((page - 1) * GROUP_PAGE_SIZE, page * GROUP_PAGE_SIZE);
+  const { items, isLoading } = useGroupItems(type, pageRefs, buildUrl);
   const groupPagination =
-    totalGroupPages > 1 ? (
-      <Pagination currentPage={safePage} totalPages={totalGroupPages} onPageChange={setPage} />
-    ) : null;
-
-  // Skeleton gate: `isLoading && !items` — SSR HTML and the client's first
-  // paint render identical skeletons (useSelfFetch starts isLoading=true on
-  // both sides), and once items exist they are never replaced by skeletons.
-  if (isLoading && !items) {
-    const skeletons = visibleGroupRefs.map(r => (
+    totalGroupPages > 1 ? <Pagination currentPage={page} totalPages={totalGroupPages} onPageChange={setPage} /> : null;
+
+  // Skeletons until this page's rows land — SSR HTML and the client's first
+  // paint render identical skeletons (useSelfFetch starts loading on both
+  // sides). The pager stays in place while an unfetched page loads.
+  if (isLoading) {
+    const skeletons = pageRefs.map(r => (
       <div key={r.id}>{renderSkeletonForType(type, cardSize, adminCampaignCard)}</div>
     ));
     return (
@@ -370,11 +368,12 @@ function ContentGroup({
         ) : (
           <div className={gridClassFor(columns)}>{skeletons}</div>
         )}
+        {groupPagination}
       </div>
     );
   }
 
-  if (!items || items.length === 0) return null;
+  if (!items) return null;
 
   // Index fetched rows by id, then render in REF order — refs carry the
   // intended sequence (suggestion mode: the engine's tier order, so
@@ -393,7 +392,7 @@ function ContentGroup({
   };
   const itemById = new Map(items.map(it => [rowKey(it), it]));
 
-  const cards = visibleGroupRefs
+  const cards = pageRefs
     .map(contentRef => {
       const itemId = String(contentRef.id);
       const item = itemById.get(itemId);
@@ -426,9 +425,9 @@ function ContentGroup({
     .filter(Boolean);
 
   if (cards.length === 0) {
-    // Current PAGE resolved zero cards (rows deleted between the ref fetch
-    // and the group fetch, or a stricter list-API gate dropped them). When a
-    // pager exists the user must keep the controls to navigate back —
+    // Current PAGE resolved zero cards (its fetch failed, rows were deleted
+    // between the ref fetch and the page fetch, or a stricter list-API gate
+    // dropped them). When a pager exists the user must keep the controls —
     // dropping the whole group would strand them. A genuinely empty group
     // (no pager) still vanishes with its heading.
     if (groupPagination) {

package/src/components/ui/autocomplete.tsx

@@ -140,6 +140,12 @@ export interface AutocompleteMultipleProps<T = string> extends AutocompleteBaseP
   limitTags?: number | 'auto';
   /** Custom render function for the "+N" overflow chip */
   getLimitTagsText?: (more: number) => ReactNode;
+  /**
+   * Show every tag in full, wrapping onto more lines: the field grows instead
+   * of truncating labels and collapsing the rest into "+N". `limitTags` is
+   * ignored. For short pickers whose picks must stay readable (ticket titles).
+   */
+  wrapTags?: boolean;
 }
 
 export type AutocompleteProps<T = string> = AutocompleteSingleProps<T> | AutocompleteMultipleProps<T>;
@@ -189,6 +195,7 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
   // Multiple-only props
   const maxItems = multiple ? (props as AutocompleteMultipleProps<T>).maxItems : undefined;
   const renderTag = multiple ? (props as AutocompleteMultipleProps<T>).renderTag : undefined;
+  const wrapTags = multiple && ((props as AutocompleteMultipleProps<T>).wrapTags ?? false);
   const limitTagsProp = multiple ? ((props as AutocompleteMultipleProps<T>).limitTags ?? 'auto') : 'auto';
   const getLimitTagsText = multiple
     ? ((props as AutocompleteMultipleProps<T>).getLimitTagsText ?? ((more: number) => `+${more}`))
@@ -252,7 +259,7 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
     inputRef,
   } = useAutoLimitTags({
     count: multiple ? selectedOptions.length : 0,
-    limitTags: multiple ? limitTagsProp : 0,
+    limitTags: multiple ? (wrapTags ? selectedOptions.length : limitTagsProp) : 0,
     placeholder: inputPlaceholder,
   });
 
@@ -506,15 +513,22 @@ function AutocompleteInner<T = string>(props: AutocompleteProps<T>, ref: Forward
             </span>
           )}
 
-          {/* Middle zone: tags + input — single line with overflow */}
-          <div ref={middleRef} className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden px-2">
+          {/* Middle zone: tags + input — single line with overflow, or wrapped lines with `wrapTags` */}
+          <div
+            ref={middleRef}
+            className={cn(
+              'flex min-w-0 flex-1 items-center gap-2 px-2',
+              wrapTags ? 'flex-wrap py-[var(--spacing-system-xsf)]' : 'overflow-hidden',
+            )}
+          >
             {/* Tags (multiple mode only) */}
             {multiple &&
               visibleTags.map(option => (
                 <Tag
                   key={String(option.value)}
                   variant="outline"
-                  labelClassName="max-w-[90px] truncate"
+                  className={wrapTags ? 'max-w-full' : undefined}
+                  labelClassName={wrapTags ? 'truncate' : 'max-w-[90px] truncate'}
                   label={renderTag ? renderTag(option) : option.label}
                   onClose={
                     !disabled

package/src/hooks/use-self-fetch.ts

@@ -5,6 +5,9 @@ import { contentFetch } from '../utils/embed-content-fetch';
 
 export interface UseSelfFetchResult<T> {
   data: T | null;
+  /** The url `data` came from (`null` until something lands). While a new url
+   *  loads, `data` still holds the previous one — compare before trusting it. */
+  dataUrl: string | null;
   /** Imperatively patch the fetched data (e.g. optimistic vote updates). */
   setData: Dispatch<SetStateAction<T | null>>;
   isLoading: boolean;
@@ -48,6 +51,7 @@ export function useSelfFetch<T>(
   const initialData = options?.initialData;
   const revalidateOnVisibleAfterMs = options?.revalidateOnVisibleAfterMs;
   const [data, setData] = useState<T | null>(initialData ?? null);
+  const [dataUrl, setDataUrl] = useState<string | null>(initialData !== undefined ? url : null);
   const [isLoading, setIsLoading] = useState(initialData === undefined && url !== null);
   const [error, setError] = useState(false);
   const [reloadKey, setReloadKey] = useState(0);
@@ -78,6 +82,7 @@ export function useSelfFetch<T>(
     // `initialData` is `undefined`.
     if (syncedProps.initialData !== initialData && initialData !== undefined) {
       setData(initialData);
+      setDataUrl(url);
     }
     // Fetching just got disabled — nothing will land to clear the spinner.
     if (syncedProps.url !== url && url === null) {
@@ -101,6 +106,7 @@ export function useSelfFetch<T>(
         const json = (await res.json()) as T;
         if (!cancelled) {
           setData(json);
+          setDataUrl(url);
           dataUrlRef.current = url; // remember the url we now hold data for
           dataAtRef.current = Date.now();
         }
@@ -149,6 +155,7 @@ export function useSelfFetch<T>(
 
   return {
     data,
+    dataUrl,
     setData,
     isLoading,
     error,