auricui-skill 0.0.0-stage → 0.1.2

package/skill/assets/upstream/apps/desktop/chat/src/components/ModelPopover.tsx

@@ -0,0 +1,280 @@
+/**
+ * The composer's agent button: which agent is thinking and with what (its model, reasoning effort and speed), and a
+ * menu to change them.
+ *
+ * The menu opens on a heading with a button to Settings → Agents, then lists the agents switched on there (none when
+ * only one is: there is nothing to choose, and the heading names it instead), then its model and effort, always, and
+ * its speed when it has one (agent-menu-rows.ts), each with its value; pointing at a row opens its choices in a side
+ * menu beside it. Choosing leaves both open (a model and an effort are often changed together); a click elsewhere
+ * closes them.
+ *
+ * The chat is a view of its own and nothing can be drawn outside it, and the two never cover each other: the side menu
+ * takes the room beside the card (a long name wraps to fit), the card slides left to make that room, and in a narrow
+ * chat the card narrows to half of it.
+ */
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { Check, ChevronRight, KeyRound, Settings } from 'lucide-react';
+import { keepFocus, Popover } from './Popover';
+import { useT } from '@/i18n';
+import { Tooltip } from '@/components/Tooltip';
+import { AgentIcon } from '@/components/AgentIcons';
+import { POPOVER_CHROME } from '@/components/ComposerCard';
+import { desktopBridge, type LocalAgentId, type RosterAgent } from '@/lib/desktop-bridge';
+import { agentModelSummary, agentOptions, currentAgent, effectivePrefs, offeredChoices, offeredOption, optionLabel, optionValue, shownAgents, useLocalAgents } from '@/state/local-agent-store';
+import { chatLayer } from '@/lib/chat-layer';
+import { isSpeed, menuOptions, type MenuOption } from '@/lib/agent-menu-rows';
+
+/** the card, wider when it lists the agents; the side menu's least width; the gap between them; the window's margin */
+const CARD_W = 236;
+const CARD_W_ONE_AGENT = 204;
+const SIDE_MIN_W = 156;
+/** the narrowest the card gets in a narrow chat */
+const CARD_MIN_W = 150;
+const SIDE_GAP = 2;
+const EDGE = 8;
+/** how long a side menu stays once the pointer leaves its row (to cross the gap into it) */
+const SIDE_CLOSE_MS = 120;
+
+const ROW_BASE =
+  'flex min-h-[28px] w-full items-center gap-2 rounded-[6px] px-2.5 text-[13px] font-normal tracking-normal text-left outline-none transition';
+const ROW = `${ROW_BASE} hover:bg-[var(--bg-hover)] focus-visible:bg-[var(--bg-hover)]`;
+
+type Option = MenuOption;
+
+/** A row's choices: those the agent offers there, or its one value when that is all it has (a "default" too). */
+function rowChoices(agent: LocalAgentId, o: Option, chosen: unknown): NonNullable<Option['options']> {
+  if (o.fixed) return o.options!.slice(0, 1);
+  return offeredChoices(agent, o, chosen);
+}
+
+/** Why the agent could not be started for its settings, as it said, on a few lines; none when it started and offered none. */
+function failureReason(error: { text: string } | undefined): string | null {
+  if (!error || error.text === 'no options') return null;
+  return error.text.replace(/\s+/g, ' ').trim().slice(0, 400) || null;
+}
+
+export function ChatAgentIcon({ id, size = 14 }: { id: LocalAgentId; size?: number }) {
+  if (id === 'byok') return <KeyRound size={size} />;
+  return <AgentIcon id={id} size={size} />;
+}
+
+export function ModelPopover({ placement = 'bottom', align = 'start' }: { placement?: 'top' | 'bottom'; align?: 'start' | 'end' } = {}) {
+  const t = useT();
+  const [open, setOpen] = React.useState(false);
+  /** the option whose side menu is open */
+  const [side, setSide] = React.useState<string | null>(null);
+  /** how far the card has slid left to make room for a side menu: it only grows while the menu is open */
+  const [cardShift, setCardShift] = React.useState(0);
+  const [sideStyle, setSideStyle] = React.useState<React.CSSProperties | null>(null);
+  const cardRef = React.useRef<HTMLDivElement | null>(null);
+  const sideRef = React.useRef<HTMLDivElement | null>(null);
+  const rowRefs = React.useRef<Record<string, HTMLElement | null>>({});
+  const closeTimer = React.useRef<number | null>(null);
+  const stopTimer = () => { if (closeTimer.current) { window.clearTimeout(closeTimer.current); closeTimer.current = null; } };
+  const showSide = (id: string) => { stopTimer(); setSide(id); };
+  const hideSideSoon = () => { stopTimer(); closeTimer.current = window.setTimeout(() => setSide(null), SIDE_CLOSE_MS); };
+  React.useEffect(() => { if (!open) { stopTimer(); setSide(null); setCardShift(0); } }, [open]);
+  React.useEffect(() => stopTimer, []);
+  /* the window's width while open: the card and the side menu share it */
+  const [windowW, setWindowW] = React.useState(() => window.innerWidth);
+  React.useEffect(() => {
+    if (!open) return;
+    const read = () => setWindowW(window.innerWidth);
+    read();
+    window.addEventListener('resize', read);
+    return () => window.removeEventListener('resize', read);
+  }, [open]);
+  const room = windowW - 2 * EDGE - SIDE_GAP;
+
+  const la = useLocalAgents();
+  const { hydrate, refresh, ensureOptions } = la;
+  React.useEffect(() => { hydrate(); }, [hydrate]);
+  const agent = currentAgent(la);
+  const shown = shownAgents(la.roster);
+  const ready = (id: LocalAgentId) => shown.find((a) => a.id === id)?.status === 'ready';
+  React.useEffect(() => { if (ready(agent)) void ensureOptions(agent); });
+  React.useEffect(() => {
+    if (!open) return;
+    void refresh().then(() => {
+      for (const a of shownAgents(useLocalAgents.getState().roster)) if (a.status === 'ready') void ensureOptions(a.id, { retry: true });
+    });
+  }, [open, refresh, ensureOptions]);
+
+  const options = agentOptions(la, agent);
+  const prefs = effectivePrefs(la.prefs, agent, la.roster, options);
+  const rows = options ? menuOptions(options, t('composer.optionDefault')).filter((o) => offeredOption(agent, la.roster, o)) : [];
+  const summary = agentModelSummary(options, prefs);
+  const triggerModel = summary.model;
+  const triggerEffort = rows.some((o) => o.category === 'thought_level' && !o.fixed) ? summary.effort : null;
+  const valueOf = (o: Option) => (o.fixed ? (optionLabel(options, o.id, optionValue(options, prefs, o.id)) ?? o.options![0]!.name)
+    : (o.category === 'model' ? triggerModel : null) ?? optionLabel(options, o.id, optionValue(options, prefs, o.id)) ?? '');
+  const rowLabel = (o: Option) => (o.category === 'model' ? t('composer.model') : o.category === 'thought_level' ? t('composer.effort') : isSpeed(o) ? t('composer.speed') : o.name);
+  const nameOf = (a: RosterAgent) => (a.id === 'byok' ? t('composer.agentOwnKey') : a.name);
+
+  /* an agent that is not ready: what it needs, said here; setting it up is Settings → Agents */
+  const statusOf = (a: RosterAgent): string | null => {
+    if (a.status === 'ready') return null;
+    if (a.status === 'checking') return t('composer.agentLoading');
+    if (a.status === 'missing') return t('composer.agentNotFound');
+    if (a.status === 'waiting') return t('composer.agentWaiting');
+    return t('composer.agentSetUp');
+  };
+  const chooseAgent = (a: RosterAgent) => {
+    setSide(null);
+    if (a.status === 'ready') { la.pick(a.id); return; }
+    if (a.status === 'checking' || a.status === 'waiting') return;
+    /* not connected, signed out, not found, no key: set up in Settings → Agents, where connecting and signing in are */
+    setOpen(false);
+    desktopBridge()?.openSettings?.('agents');
+  };
+  const openSettings = () => { setOpen(false); desktopBridge()?.openSettings?.('agents'); };
+  const current = shown.find((a) => a.id === agent);
+  const choosing = side ? rows.find((o) => o.id === side) : undefined;
+  const chosenValue = (o: Option) => (o.fixed ? o.options![0]!.value : optionValue(options, prefs, o.id));
+  /* a fixed row's one value is already the one in use */
+  const pickChoice = (o: Option, value: unknown) => { if (!o.fixed) la.setPref(agent, o.id, value); };
+
+  /* the side menu beside its row: on the right of the card, the card sliding left when the window is too narrow for
+     both, and over the card's right edge only when it cannot slide far enough; measured again once it is drawn */
+  const sidePainted = sideStyle !== null;
+  React.useLayoutEffect(() => {
+    const card = cardRef.current;
+    const row = choosing ? rowRefs.current[choosing.id] : null;
+    if (!open || !choosing || !card || !row) { setSideStyle(null); return; }
+    const c = card.getBoundingClientRect();
+    const el = sideRef.current;
+    const sideMax = Math.max(0, room - c.width);
+    const w = Math.min(sideMax, Math.max(SIDE_MIN_W, el?.offsetWidth ?? SIDE_MIN_W));
+    const h = el?.offsetHeight ?? 8 + (choosing.options?.length ?? 0) * 28;
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    let left = c.right + SIDE_GAP;
+    const need = left + w - (width - EDGE);
+    if (need > 0) {
+      const slide = Math.min(need, Math.max(0, c.left - EDGE));
+      if (slide > 0) setCardShift((s) => s + slide);
+      left = Math.max(EDGE, Math.min(left - slide, width - EDGE - w));
+    }
+    let top = row.getBoundingClientRect().top - 4;
+    if (top + h > height - EDGE) top = Math.max(EDGE, height - EDGE - h);
+    setSideStyle({ position: 'fixed', left, top, zIndex: 10001, minWidth: Math.min(SIDE_MIN_W, sideMax), width: 'max-content', maxWidth: sideMax, maxHeight: height - 2 * EDGE });
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- keyed by the open row
+  }, [open, choosing?.id, cardShift, sidePainted, room]);
+
+  const sideMenu = open && choosing && typeof document !== 'undefined' ? createPortal(
+    <div ref={sideRef} onMouseEnter={() => showSide(choosing.id)} onMouseLeave={hideSideSoon}
+      style={{ ...POPOVER_CHROME, padding: 4, overflowY: 'auto', ...(sideStyle ?? { position: 'fixed', left: -9999, top: 0 }) }}>
+      {/* the names only: no descriptions, and the choices the menu offers (rowChoices) */}
+      {rowChoices(agent, choosing, chosenValue(choosing)).map((choice) => {
+        const selected = chosenValue(choosing) === choice.value;
+        return (
+          <button key={String(choice.value)} type="button" onMouseDown={keepFocus}
+            onClick={() => pickChoice(choosing, choice.value)} className={ROW}>
+            <span className="min-w-0 flex-1 truncate text-[var(--text)]">{choice.name}</span>
+            <Check size={13} className={`ml-2 shrink-0 text-[var(--text)] ${selected ? '' : 'invisible'}`} />
+          </button>
+        );
+      })}
+    </div>,
+    chatLayer(),
+  ) : null;
+
+  return (
+    <>
+    <Popover
+      open={open}
+      onOpenChange={setOpen}
+      placement={placement}
+      align={align}
+      bare
+      insideRefs={[sideRef]}
+      trigger={
+        <Tooltip label={t('composer.model')}>
+          <button type="button" onMouseDown={keepFocus}
+            className="group inline-flex h-8 max-w-full items-center rounded-full px-2 text-[12.5px] font-medium transition hover:bg-[var(--bg-hover)]">
+            <span className="inline-flex min-w-0 max-w-[190px] items-center gap-1.5 truncate whitespace-nowrap">
+              <span className="shrink-0 text-[var(--text-dim)]"><ChatAgentIcon id={agent} size={13} /></span>
+              <span className="truncate text-[var(--text-dim)] transition group-hover:text-[var(--text)]">
+                {(ready(agent) && triggerModel) || (current ? nameOf(current) : t('composer.agentNone'))}
+              </span>
+              {ready(agent) && triggerEffort ? <span className="text-[var(--text-muted)] transition group-hover:text-[var(--text-dim)]">{triggerEffort}</span> : null}
+            </span>
+          </button>
+        </Tooltip>
+      }
+    >
+      <div ref={cardRef} style={{ ...POPOVER_CHROME, width: Math.min(shown.length > 1 ? CARD_W : CARD_W_ONE_AGENT, Math.max(CARD_MIN_W, Math.floor(room / 2))), padding: 4, transform: cardShift ? `translateX(-${cardShift}px)` : undefined }}>
+        {shown.length === 0 && la.roster ? (
+          <div className="px-2.5 py-2 text-[12.5px] leading-relaxed text-[var(--text-muted)]">
+            {t('composer.agentNoneShown')}{' '}
+            <button type="button" onMouseDown={keepFocus} onClick={openSettings} className="text-[var(--text)] underline underline-offset-2">{t('composer.openSettings')}</button>
+          </div>
+        ) : (
+          <>
+            {/* the heading, and Settings → Agents beside it (where agents are switched on, connected and signed in) */}
+            <div className="flex items-center gap-2 pb-0.5 pl-2.5 pr-0.5 pt-0.5">
+              <span className="min-w-0 flex-1 truncate text-[11px] text-[var(--text-faint)]">{shown.length > 1 ? t('composer.agentSection') : current ? nameOf(current) : t('composer.agentSection')}</span>
+              <Tooltip label={t('composer.openSettings')}>
+                <button type="button" aria-label={t('composer.openSettings')} onMouseDown={keepFocus} onMouseEnter={hideSideSoon} onClick={openSettings}
+                  className="flex h-6 w-6 shrink-0 items-center justify-center rounded-[6px] text-[var(--text-faint)] outline-none transition hover:bg-[var(--bg-hover)] hover:text-[var(--text)] focus-visible:bg-[var(--bg-hover)]">
+                  <Settings size={13} />
+                </button>
+              </Tooltip>
+            </div>
+            {shown.length > 1 ? (
+              <>
+                {shown.map((a) => {
+                  const status = statusOf(a);
+                  return (
+                    <button key={a.id} type="button" onMouseDown={keepFocus} onMouseEnter={hideSideSoon} onClick={() => chooseAgent(a)} className={ROW}>
+                      <span className={`flex w-4 shrink-0 justify-center ${status ? 'text-[var(--text-faint)]' : 'text-[var(--text)]'}`}><ChatAgentIcon id={a.id} /></span>
+                      <span className={`min-w-0 flex-1 truncate ${status ? 'text-[var(--text-muted)]' : 'text-[var(--text)]'}`}>{nameOf(a)}</span>
+                      {agent === a.id && !status ? <Check size={13} className="shrink-0 text-[var(--text)]" />
+                        : status ? <span className="min-w-0 max-w-[55%] truncate text-[11.5px] text-[var(--text-faint)]" title={status}>{status}</span> : null}
+                    </button>
+                  );
+                })}
+                <div className="mx-1 my-1 h-px bg-[var(--border)]" />
+              </>
+            ) : null}
+            {!ready(agent) ? (
+              <div className="px-2.5 py-1.5 text-[12px] leading-relaxed text-[var(--text-muted)]">
+                {current ? `${nameOf(current)}: ${statusOf(current) ?? ''}` : t('composer.agentLoading')}{' '}
+                <button type="button" onMouseDown={keepFocus} onClick={openSettings} className="text-[var(--text)] underline underline-offset-2">{t('composer.openSettings')}</button>
+              </div>
+            ) : rows.length === 0 ? (
+              <p className="px-2.5 py-1.5 text-[12px] leading-relaxed text-[var(--text-muted)]">
+                {la.optionsError[agent]
+                  ? <>
+                    {la.optionsError[agent]?.code === 'outdated' ? t('composer.agentOutdated') : t('composer.agentOptionsFailed')} <button type="button" onMouseDown={keepFocus} onClick={() => void la.ensureOptions(agent, { retry: true })} className="text-[var(--text)] underline underline-offset-2">{t('project.retry')}</button>
+                    {/* what the agent said, so the person can fix it (a setting it cannot read) or tell us */}
+                    {failureReason(la.optionsError[agent]) ? (
+                      <span className="mt-1 line-clamp-4 block select-text break-words text-[11.5px] text-[var(--text-faint)]" title={la.optionsError[agent]?.text}>{failureReason(la.optionsError[agent])}</span>
+                    ) : null}
+                  </>
+                  : t('composer.agentLoading')}
+              </p>
+            ) : rows.map((o, i) => (
+              <React.Fragment key={o.id}>
+                {i > 0 ? <div className="mx-1 my-0.5 h-px bg-[var(--border)]" /> : null}
+                <button type="button" ref={(el) => { rowRefs.current[o.id] = el; }} aria-haspopup="menu" aria-expanded={side === o.id}
+                  onMouseDown={keepFocus} onMouseEnter={() => showSide(o.id)} onMouseLeave={hideSideSoon} onFocus={() => showSide(o.id)}
+                  onClick={() => showSide(o.id)}
+                  className={`${ROW_BASE} ${side === o.id ? 'bg-[var(--bg-hover)]' : 'hover:bg-[var(--bg-hover)]'}`}>
+                  <span className="shrink-0 text-[var(--text)]">{rowLabel(o)}</span>
+                  <span className="min-w-0 flex-1 truncate text-right text-[var(--text-dim)]">{valueOf(o)}</span>
+                  <ChevronRight size={12} className="shrink-0 text-[var(--text-faint)]" />
+                </button>
+              </React.Fragment>
+            ))}
+          </>
+        )}
+      </div>
+    </Popover>
+    {sideMenu}
+    </>
+  );
+}
+
+export { Popover } from './Popover';

package/skill/assets/upstream/apps/desktop/chat/src/components/NoticeCard.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import React from 'react';
+import { useT } from '@/i18n';
+import { CardActions, CardButton, ComposerCard } from './ComposerCard';
+
+/**
+ * Notices above the composer: a card, not a centered modal.
+ *
+ * Shell and buttons are ComposerCard's (themed background, the same buttons).
+ */
+export function NoticeCard({
+  title,
+  body,
+  onClose,
+  children,
+  role,
+}: {
+  title: string;
+  body?: React.ReactNode;
+  onClose: () => void;
+  children?: React.ReactNode;
+  role?: React.AriaRole;
+}) {
+  return (
+    <ComposerCard title={title} body={body} onClose={onClose} {...(role ? { role } : {})}>
+      {children}
+    </ComposerCard>
+  );
+}
+
+export function NoticeFooter({ children }: { children: React.ReactNode }) {
+  return <CardActions>{children}</CardActions>;
+}
+
+export const NoticeDismissButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(function NoticeDismissButton(props, ref) {
+  return <CardButton {...props} ref={ref} weight="quiet" />;
+});
+
+export const NoticePrimaryButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & { danger?: boolean }
+>(function NoticePrimaryButton({ danger = false, ...props }, ref) {
+  return <CardButton {...props} ref={ref} weight={danger ? 'danger' : 'primary'} />;
+});
+
+/** A complete notice above the composer: title, body, Dismiss, and an optional primary button at the bottom right. */
+export function ComposerNotice({
+  title,
+  body,
+  primaryLabel,
+  onPrimary,
+  primaryBusy,
+  primaryDanger,
+  onDismiss,
+  role = 'alert',
+}: {
+  title: string;
+  body: React.ReactNode;
+  primaryLabel?: React.ReactNode;
+  onPrimary?: () => void;
+  primaryBusy?: boolean;
+  primaryDanger?: boolean;
+  onDismiss: () => void;
+  role?: React.AriaRole;
+}) {
+  const t = useT();
+  return (
+    <NoticeCard title={title} body={body} onClose={onDismiss} role={role}>
+      <NoticeFooter>
+        <NoticeDismissButton onClick={onDismiss}>{t('project.dismiss')}</NoticeDismissButton>
+        {primaryLabel && onPrimary ? (
+          <NoticePrimaryButton
+            disabled={primaryBusy}
+            danger={primaryDanger}
+            onClick={onPrimary}
+          >
+            {primaryLabel}
+          </NoticePrimaryButton>
+        ) : null}
+      </NoticeFooter>
+    </NoticeCard>
+  );
+}

package/skill/assets/upstream/apps/desktop/chat/src/components/Popover.tsx

@@ -0,0 +1,195 @@
+'use client';
+
+/**
+ * A small popover opened from a button: closes on an outside click or Esc, portalled so no overflow clips it.
+ * Its own file: several places use it, and it shouldn't pull in the model menu.
+ */
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { useChatMenu } from '@/lib/chat-menu';
+import { chatLayer } from '@/lib/chat-layer';
+
+export function keepFocus(e: React.MouseEvent) {
+  e.preventDefault();
+}
+
+const EMPTY_INSIDE_REFS: Array<React.RefObject<HTMLElement | null>> = [];
+
+/**
+ * A modal opened from a popover (a full-screen scrim and a card), portalled on its own.
+ *
+ * It must be recognizable, or every press on it reads as an outside click: the popover closes, the component that
+ * rendered the modal unmounts, and the button's click never fires. A marker, not `[role="dialog"]`: any dialog
+ * mounted elsewhere would then keep the popover from ever closing.
+ */
+const MODAL_LAYER = '[data-modal-layer]';
+
+function inModalLayer(node: Node): boolean {
+  const el = node instanceof Element ? node : node.parentElement;
+  return Boolean(el?.closest(MODAL_LAYER));
+}
+
+/**
+ * A popover opened from a button: closes on an outside click or Esc, portalled so no overflow clips it.
+ * Buttons that stand side by side should open the same kind of thing, with the same rules.
+ */
+export function Popover({
+  open,
+  onOpenChange,
+  trigger,
+  children,
+  placement = 'bottom',
+  align = 'start',
+  insideRefs = EMPTY_INSIDE_REFS,
+  bare = false,
+}: {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  placement?: 'top' | 'bottom' | 'auto';
+  /** end: the panel's right edge aligns with the trigger's (keeps triggers near the right edge on screen). */
+  align?: 'start' | 'end';
+  insideRefs?: Array<React.RefObject<HTMLElement | null>>;
+  /** bare: no card styling on the panel (children draw their own, e.g. several cards side by side). */
+  bare?: boolean;
+}) {
+  const ref = React.useRef<HTMLDivElement | null>(null);
+  const panelRef = React.useRef<HTMLDivElement | null>(null);
+  useChatMenu(open);
+  const [panelStyle, setPanelStyle] = React.useState<React.CSSProperties | null>(null);
+
+  const update = React.useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const gap = 6;
+    const pad = 12;
+    const below = window.innerHeight - r.bottom - gap - pad;
+    const above = r.top - gap - pad;
+    /* `auto` picks a side by the panel's real height: a side it fits in first, else the larger one. Before the
+       panel is drawn, 280 is assumed; it is measured again once drawn (see the layoutEffect below). */
+    const panel = panelRef.current;
+    const inner = panel?.firstElementChild as HTMLElement | null;
+    /* The inner card's scrollHeight: once the card clamps itself to --popover-max-h, the panel's height is the
+       clamped one and would always "fit". */
+    const need = panel ? Math.max(panel.scrollHeight, inner?.scrollHeight ?? 0) : 280;
+    const openUp = placement === 'top'
+      || (placement === 'auto' && below < need && above > below);
+    const room = Math.max(0, openUp ? above : below);
+    const x = align === 'end' ? '-100%' : '0%';
+    setPanelStyle({
+      position: 'fixed',
+      left: align === 'end' ? r.right : r.left,
+      top: openUp ? r.top - gap : r.bottom + gap,
+      transform: `translate(${x}, ${openUp ? '-100%' : '0%'})`,
+      zIndex: 10000,
+      /* The room on this side, for a bare card to use as its max-height: it scrolls inside, so its corners and
+         border don't scroll away with the content. */
+      ['--popover-max-h' as string]: `${room}px`,
+      ...(bare
+        ? { overflow: 'visible' }
+        : {
+            maxHeight: room,
+            overflowY: 'auto' as const,
+            overscrollBehavior: 'contain',
+          }),
+    });
+  }, [placement, align, bare]);
+
+  React.useLayoutEffect(() => {
+    if (!open) {
+      setPanelStyle(null);
+      return;
+    }
+    update();
+    window.addEventListener('resize', update);
+    window.addEventListener('scroll', update, true);
+    return () => {
+      window.removeEventListener('resize', update);
+      window.removeEventListener('scroll', update, true);
+    };
+  }, [open, update]);
+
+  /* Measure again once the panel is drawn: on the first update it wasn't in the DOM and the side was a guess.
+     The dependency is the "drawn" boolean, not the style object, which is new on every update and would loop. */
+  const painted = panelStyle !== null;
+  React.useLayoutEffect(() => {
+    if (open && painted) update();
+  }, [open, painted, update]);
+
+  /*
+   * Close on an outside click.
+   *
+   * Three details; miss one and a click outside doesn't close it:
+   *
+   * 1. Listen on window in the capture phase, not on document while bubbling. React delegates events at the root
+   *    container, so any `stopPropagation()` on the way stops the native event there and document never hears it.
+   *    Capture runs down from window and nothing can stop it first.
+   * 2. pointerdown, not mousedown: pens and touch don't always synthesise mouse events.
+   * 3. Close on press, not release: from the press on, the popover is no longer what the person is dealing with.
+   *
+   * Values go through a ref, not the dependency array: `insideRefs` is an inline literal at call sites and
+   * `onOpenChange` is new each render, so listing them would re-attach the listeners on every render.
+   */
+  const latest = React.useRef({ onOpenChange, insideRefs });
+  latest.current = { onOpenChange, insideRefs };
+  React.useEffect(() => {
+    if (!open) return;
+    const close = (e: Event) => {
+      const t = e.target as Node;
+      if (e.type === 'pointerdown') {
+        if (ref.current?.contains(t) || panelRef.current?.contains(t)) return;
+        if (inModalLayer(t)) return;
+        for (const extra of latest.current.insideRefs) if (extra.current?.contains(t)) return;
+      }
+      latest.current.onOpenChange(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return;
+      // With a modal open, Esc belongs to the modal, not to the popover beneath it.
+      if (document.querySelector(MODAL_LAYER)) return;
+      latest.current.onOpenChange(false);
+    };
+    window.addEventListener('pointerdown', close, true);
+    window.addEventListener('blur', close);
+    window.addEventListener('keydown', onKey);
+    return () => {
+      window.removeEventListener('pointerdown', close, true);
+      window.removeEventListener('blur', close);
+      window.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  const panel =
+    open && panelStyle ? (
+      <div
+        ref={panelRef}
+        data-popover-panel="true"
+        style={
+          bare
+            ? panelStyle
+            : {
+                minWidth: 140,
+                ...panelStyle,
+                background: 'var(--bg-surface)',
+                border: '1px solid var(--border-strong)',
+                borderRadius: 16,
+                boxShadow: '0 16px 40px -8px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.18)',
+                overflowY: 'auto',
+              }
+        }
+      >
+        {children}
+      </div>
+    ) : null;
+
+  return (
+    <div ref={ref} className="inline-flex w-fit">
+      <div className="inline-flex w-fit" onMouseDown={keepFocus} onClick={() => onOpenChange(!open)}>
+        {trigger}
+      </div>
+      {typeof document !== 'undefined' && panel ? createPortal(panel, chatLayer()) : null}
+    </div>
+  );
+}