@hienlh/ppm 0.23.6 → 0.23.8

package/src/web/components/system/use-process-signal.ts

@@ -0,0 +1,87 @@
+/**
+ * Sending one signal to a process — Mission Center's "Send Signal" submenu.
+ *
+ * Separate from `useProcessKill` because the two mean different things: a kill
+ * escalates TERM to KILL, while asking for SIGSTOP must send SIGSTOP and nothing
+ * else. The server enforces the SAME guard for both, so a process the kill button
+ * refuses cannot be suspended either.
+ */
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+import { getAuthToken } from "@/lib/api-client";
+import type {
+  ProcessInfo, ProcessSignal, SignalProcessRequest, SignalProcessResult,
+} from "../../../types/system-metrics";
+
+/** Human wording for the menu, in the order Mission Center lists them. */
+export const SIGNAL_LABELS: Record<ProcessSignal, string> = {
+  STOP: "Suspend (SIGSTOP)",
+  CONT: "Continue (SIGCONT)",
+  TERM: "Terminate (SIGTERM)",
+  KILL: "Kill (SIGKILL)",
+  HUP: "Hang up (SIGHUP)",
+  INT: "Interrupt (SIGINT)",
+  USR1: "User signal 1",
+  USR2: "User signal 2",
+};
+
+/** The two that cannot be caught or ignored, so the UI can warn before sending. */
+export const UNCATCHABLE_SIGNALS: readonly ProcessSignal[] = ["KILL", "STOP"];
+
+/** `api.post` has no way to add the `X-PPM-Request` header the route requires,
+ *  so this mirrors `killProcess` exactly — one Error on any failure. */
+export async function signalProcess(request: SignalProcessRequest): Promise<SignalProcessResult> {
+  const token = getAuthToken();
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    "X-PPM-Request": "1",
+  };
+  if (token) headers.Authorization = `Bearer ${token}`;
+
+  const res = await fetch("/api/system/resources/signal", {
+    method: "POST",
+    headers,
+    body: JSON.stringify(request),
+  });
+  let json: { ok: boolean; data?: SignalProcessResult; error?: string };
+  try {
+    json = await res.json();
+  } catch {
+    throw new Error(res.ok ? "Empty response from server" : `Server error (HTTP ${res.status})`);
+  }
+  if (json.ok === false) throw new Error(json.error ?? `HTTP ${res.status}`);
+  return json.data as SignalProcessResult;
+}
+
+export function buildSignalRequest(
+  proc: ProcessInfo,
+  signal: ProcessSignal,
+  tree: boolean,
+): SignalProcessRequest {
+  // `startedAt` is the identity guard: a recycled pid is a 409, never a signal
+  // delivered to whatever took the number over.
+  return { pid: proc.pid, startedAt: proc.startedAt, signal, tree };
+}
+
+export function useProcessSignal() {
+  const [pending, setPending] = useState<number | null>(null);
+
+  const send = useCallback(async (proc: ProcessInfo, signal: ProcessSignal, tree = false) => {
+    setPending(proc.pid);
+    try {
+      const result = await signalProcess(buildSignalRequest(proc, signal, tree));
+      const count = result.signalled.length;
+      toast.success(
+        count > 1
+          ? `Sent SIG${signal} to ${proc.name} and ${count - 1} child processes`
+          : `Sent SIG${signal} to ${proc.name} (${proc.pid})`,
+      );
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : `Could not signal ${proc.name}`);
+    } finally {
+      setPending(null);
+    }
+  }, []);
+
+  return { send, pending };
+}

package/src/web/components/tunnels/public-tunnel-switch.tsx

@@ -0,0 +1,82 @@
+/**
+ * Master on/off switch for PPM's own public tunnel.
+ *
+ * The switch only writes config — the supervisor owns the cloudflared process
+ * and picks the change up as a `retunnel` — so "switched on" and "actually
+ * reachable" are a few seconds apart. The row reports both rather than
+ * pretending the toggle is instant, and polls on the same 10s cadence as the
+ * tunnel list below it.
+ */
+import { useCallback, useEffect, useState } from "react";
+import { Globe, Loader2 } from "@/lib/icons";
+import { Switch } from "@/components/ui/switch";
+import { toast } from "sonner";
+import { publicTunnelApi, type PublicTunnelStatus } from "@/lib/api-tunnels";
+
+export function PublicTunnelSwitch() {
+  const [status, setStatus] = useState<PublicTunnelStatus | null>(null);
+  const [pending, setPending] = useState(false);
+
+  const refresh = useCallback(async () => {
+    try {
+      setStatus(await publicTunnelApi.status());
+    } catch {
+      // Keep the last known state — a failed poll is not a state change.
+    }
+  }, []);
+
+  useEffect(() => {
+    refresh();
+    const interval = setInterval(refresh, 10_000);
+    return () => clearInterval(interval);
+  }, [refresh]);
+
+  // Nothing to toggle until the first read lands; rendering a default-on switch
+  // first would flicker to off on every load of a machine that has it off.
+  if (!status) return null;
+
+  // Absent on a server that predates the switch, where the tunnel was
+  // unconditional — so absent reads as on, never off.
+  const enabled = status.enabled ?? true;
+  const starting = enabled && !status.active;
+
+  async function toggle(next: boolean) {
+    setPending(true);
+    setStatus((s) => (s ? { ...s, enabled: next } : s));
+    try {
+      await publicTunnelApi.setEnabled(next);
+      await refresh();
+    } catch (e) {
+      setStatus((s) => (s ? { ...s, enabled: !next } : s));
+      toast.error(e instanceof Error ? e.message : "Could not change the tunnel setting");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-3 p-3 border-b border-border bg-surface">
+      <Globe className="size-4 shrink-0 text-text-secondary" />
+      <div className="flex-1 min-w-0">
+        <div className="text-sm font-medium text-text-primary">Public tunnel</div>
+        <p className="text-xs text-text-secondary leading-relaxed truncate">
+          {!enabled
+            ? "Off — PPM stays reachable on this network only"
+            : starting
+              ? "Starting…"
+              : status.url ?? "On — waiting for a public URL"}
+        </p>
+      </div>
+      {(pending || starting) && <Loader2 className="size-4 shrink-0 animate-spin text-text-subtle" />}
+      {/* The control is 20x36; the pseudo-element takes its hit area to 44x60
+          so it is tappable on a phone without changing the row's layout. */}
+      <Switch
+        checked={enabled}
+        onCheckedChange={toggle}
+        disabled={pending}
+        aria-label="Public tunnel"
+        className="relative shrink-0 before:absolute before:-inset-3 before:content-['']"
+      />
+    </div>
+  );
+}

package/src/web/components/tunnels/tunnel-manager-tab.tsx

@@ -4,6 +4,7 @@ import { tunnelsApi, type TunnelEntry } from "@/lib/api-tunnels";
 import { copyToClipboard } from "@/lib/clipboard";
 import { toast } from "sonner";
 import { NamedTunnelSection } from "@/components/tunnels/named-tunnel/named-tunnel-section";
+import { PublicTunnelSwitch } from "@/components/tunnels/public-tunnel-switch";
 
 /** Badge label + style per tunnel source. */
 const SOURCE_META: Record<TunnelEntry["source"], { label: string; cls: string }> = {
@@ -92,6 +93,9 @@ export function TunnelManagerTab() {
 
   return (
     <div className="flex flex-col h-full w-full bg-background">
+      {/* Master switch first: everything below it is moot while the tunnel is off */}
+      <PublicTunnelSwitch />
+
       {/* Named tunnel status + setup entry point, above the quick-forward form */}
       <NamedTunnelSection />
 

package/src/web/components/ui/dialog.tsx

@@ -68,7 +68,20 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background text-foreground p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          // `grid-cols-[minmax(0,1fr)]` rather than the implicit `auto` column: an
+          // auto track's base size is its items' MIN-CONTENT contribution, so one
+          // unbreakable string anywhere inside — a systemd unit name, a log line,
+          // a path — widens the column past the dialog and every child with it,
+          // drawing outside the panel. `overflow-wrap: break-word` does not help,
+          // because by specification it does not affect min-content size.
+          "fixed top-[50%] left-[50%] z-50 grid grid-cols-[minmax(0,1fr)] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background text-foreground p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          // The close button is absolutely positioned over the top-right corner,
+          // which is the header's first line — so a title long enough to reach it
+          // renders underneath it. Reserve the corner, but only when the button is
+          // actually there.
+          // A descendant selector, not a child one: several dialogs put the header
+          // inside a flex/scroll wrapper.
+          showCloseButton && "[&_[data-slot=dialog-header]]:pr-8",
           className
         )}
         {...props}

package/src/web/components/ui/search-select.tsx

@@ -0,0 +1,279 @@
+/**
+ * A select whose list can be searched: a trigger showing the current choice,
+ * and a panel with a filter box over the options.
+ *
+ * It exists because the lists it serves are the case a native `<select>` or a
+ * plain menu handles worst — dozens to hundreds of names that agree for most of
+ * their length (`fix/NX-1234-…` branches, `nxsys-backend-nx5833` checkouts), where
+ * the only way to the one you want is reading past the ones you do not. The shape
+ * is the checkout quick pick's, and it shares that picker's keyboard arithmetic
+ * (`moveSelection`) and its selection tint.
+ *
+ * A Radix popover rather than a panel positioned by hand, because the surfaces
+ * that mount it are `overflow-hidden`: a dropdown anchored inside one is clipped at
+ * its bottom edge, which shows as a list a few rows tall with no scrollbar and no
+ * sign that anything was cut. The portal escapes that, and collision detection
+ * keeps it on screen when the panel is docked low in the window. Below `md` it is
+ * a bottom sheet instead, per the mobile rules.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState, type ElementType } from "react";
+import { Popover } from "radix-ui";
+import { Check, ChevronDown, Search } from "@/lib/icons";
+import { cn } from "@/lib/utils";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { usePortalContainer } from "@/components/ui/portal-container-context";
+import { StartEllipsis } from "@/components/ui/start-ellipsis";
+import { firstSelectable, moveSelection } from "@/lib/git-ref-picker";
+import { rowIndexOf, searchRows, type SearchSelectItem } from "@/lib/search-select-rows";
+
+export interface SearchSelectProps {
+  value: string;
+  items: SearchSelectItem[];
+  onChange: (value: string) => void;
+  /** Names the control for screen readers, and titles the sheet on mobile. */
+  label: string;
+  /** The filter box's placeholder — "Search branches". */
+  searchPlaceholder: string;
+  /** What an empty result says — "No matching branches". */
+  emptyText: string;
+  /** Leading icon on the trigger, if the surroundings do not already carry one. */
+  icon?: ElementType;
+  /** Trigger text while `value` names none of the items. */
+  placeholder?: string;
+  testId?: string;
+  /** Width and look, from the caller — the trigger shares a row with everything else. */
+  className?: string;
+  /**
+   * Set this inside a Radix dialog, and only there.
+   *
+   * A modal dialog traps focus, and the popover is portalled outside it: the
+   * dialog's focus scope sees focus land on an element it does not contain and
+   * pulls it straight back, so the filter box cannot be typed in at all. A
+   * modal popover has a trapped scope of its own, which pushes onto Radix's
+   * scope stack and pauses the dialog's — the one arrangement where both
+   * behave. It costs a scroll lock and `aria-hidden` on everything behind,
+   * which is why it is not the default out in a panel.
+   */
+  modal?: boolean;
+}
+
+export function SearchSelect({
+  value, items, onChange, label, searchPlaceholder, emptyText, icon: Icon, placeholder,
+  testId, className, modal,
+}: SearchSelectProps) {
+  const isMobile = useIsMobile();
+  const portalContainer = usePortalContainer();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState(-1);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const rows = useMemo(() => searchRows(items, query), [items, query]);
+  const current = items.find((i) => i.value === value);
+
+  /*
+   * Highlight the choice already in force when it survives the filter, and the
+   * first match otherwise. Opening on row zero instead would put Enter on an
+   * option nobody asked for, and on a list this long it hides where you
+   * currently are behind several screens of scrolling.
+   */
+  useEffect(() => {
+    const at = rowIndexOf(rows, value);
+    setSelected(at >= 0 ? at : firstSelectable(rows));
+  }, [rows, value]);
+
+  // A filter is a question about this opening, not a setting.
+  useEffect(() => { if (!open) setQuery(""); }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    listRef.current?.querySelector<HTMLElement>('[data-active="true"]')?.scrollIntoView?.({ block: "nearest" });
+  }, [open, selected]);
+
+  const pick = useCallback((next: string) => {
+    onChange(next);
+    setOpen(false);
+  }, [onChange]);
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setSelected((i) => moveSelection(rows, i, 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setSelected((i) => moveSelection(rows, i, -1));
+        break;
+      case "Enter": {
+        e.preventDefault();
+        const row = rows[selected];
+        if (row?.kind === "item") pick(row.item.value);
+        break;
+      }
+      case "Escape":
+        e.preventDefault();
+        setOpen(false);
+        break;
+    }
+  }
+
+  const body = (
+    <>
+      <div className="flex items-center gap-2 border-b border-border px-2.5 py-2 shrink-0">
+        <Search className="size-4 shrink-0 text-text-subtle" />
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder={searchPlaceholder}
+          aria-label={`Search ${label.toLowerCase()}`}
+          className="min-w-0 flex-1 bg-transparent text-sm text-text-primary outline-none placeholder:text-text-subtle"
+        />
+      </div>
+      <div
+        ref={listRef}
+        role="listbox"
+        aria-label={label}
+        className="min-h-0 flex-1 overflow-y-auto py-1"
+        data-testid={testId && `${testId}-list`}
+      >
+        {rows.length === 0 ? (
+          <p className="px-3 py-4 text-center text-sm text-text-subtle">{emptyText}</p>
+        ) : (
+          rows.map((row, i) =>
+            row.kind === "separator" ? (
+              <div
+                key={`sep-${row.label}`}
+                className="border-t border-border-soft px-3 pt-2 pb-1 text-[10px] uppercase tracking-wide text-text-3 first:border-t-0 first:pt-1"
+              >
+                {row.label}
+              </div>
+            ) : (
+              <OptionRow
+                key={row.item.value}
+                item={row.item}
+                active={i === selected}
+                picked={row.item.value === value}
+                mobile={isMobile}
+                onPick={() => pick(row.item.value)}
+                onHover={() => setSelected(i)}
+              />
+            ),
+          )
+        )}
+      </div>
+    </>
+  );
+
+  const trigger = (
+    <button
+      type="button"
+      aria-expanded={open}
+      // A panel with a filter box in it, not a bare list — and `combobox` would
+      // be a promise this button cannot keep, since the text input it would
+      // have to own does not exist until the panel is open. Radix says the same
+      // thing on the desktop trigger; this is for the sheet, which has no Radix
+      // under it.
+      aria-haspopup="dialog"
+      aria-label={label}
+      title={current?.title ?? current?.label ?? value}
+      data-testid={testId}
+      onClick={isMobile ? () => setOpen(true) : undefined}
+      // h-10 under a finger: the rows this sits in are compact by design on a
+      // desktop, but the trigger is the one thing in them anyone taps.
+      className={cn(
+        "flex h-10 items-center gap-1 rounded-md border border-border bg-panel px-2 text-xs text-text-primary min-w-0 md:h-7",
+        className,
+      )}
+    >
+      {Icon && <Icon className="size-3.5 shrink-0 text-text-3" />}
+      <StartEllipsis>{current?.label ?? (value || placeholder || "")}</StartEllipsis>
+      <ChevronDown className="size-3.5 shrink-0 text-text-3" />
+    </button>
+  );
+
+  if (isMobile) {
+    return (
+      <>
+        {trigger}
+        {/*
+          No autofocus here, deliberately: the keyboard would cover most of the
+          sheet before the list has been seen once, and the filter box is one
+          tap away at the top of it.
+        */}
+        <BottomSheet open={open} onClose={() => setOpen(false)} className="popover-solid flex max-h-[80dvh] flex-col">
+          <div className="shrink-0 px-3 pb-1 text-xs font-medium text-text-2">{label}</div>
+          <div className="flex min-h-0 flex-1 flex-col" onKeyDown={handleKeyDown}>{body}</div>
+        </BottomSheet>
+      </>
+    );
+  }
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen} modal={modal}>
+      <Popover.Trigger asChild>{trigger}</Popover.Trigger>
+      <Popover.Portal container={portalContainer}>
+        <Popover.Content
+          align="start"
+          sideOffset={4}
+          collisionPadding={8}
+          onKeyDown={handleKeyDown}
+          // Radix focuses the first focusable child, which is already the filter
+          // box; saying so explicitly keeps it true if a control is ever added
+          // above it.
+          onOpenAutoFocus={(e) => { e.preventDefault(); inputRef.current?.focus(); }}
+          // `popover-solid`, or the glass themes render the list over whatever
+          // is behind the panel.
+          className="popover-solid z-50 flex w-[min(26rem,calc(100vw-1.5rem))] flex-col overflow-hidden rounded-md border border-border text-popover-foreground shadow-lg max-h-[min(20rem,var(--radix-popover-content-available-height))]"
+        >
+          {body}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+/**
+ * One option.
+ *
+ * The active tint is `primary/15` rather than shadcn's `accent`, for the reason
+ * spelled out in `branch-picker.tsx`: `accent` is a hover *surface* in this app
+ * and composites to a contrast ratio of about 1.01 over the panel it sits on,
+ * i.e. a keyboard selection nobody can see.
+ */
+function OptionRow({ item, active, picked, mobile, onPick, onHover }: {
+  item: SearchSelectItem;
+  active: boolean;
+  picked: boolean;
+  mobile: boolean;
+  onPick: () => void;
+  onHover: () => void;
+}) {
+  const Icon = item.icon;
+  return (
+    <button
+      type="button"
+      role="option"
+      aria-selected={picked}
+      data-active={active || undefined}
+      data-value={item.value}
+      title={item.title}
+      onClick={onPick}
+      onMouseEnter={onHover}
+      className={cn(
+        "flex w-full items-center gap-2 px-3 text-left text-sm",
+        mobile ? "min-h-11 py-2" : "py-1",
+        active ? "bg-primary/15 text-text-primary" : "text-text-2",
+      )}
+    >
+      {Icon && <Icon className="size-3.5 shrink-0 text-text-3" />}
+      <StartEllipsis>{item.label}</StartEllipsis>
+      {item.hint && <span className="shrink-0 text-[10px] text-text-3">{item.hint}</span>}
+      {picked && <Check className="size-3.5 shrink-0 text-primary" />}
+    </button>
+  );
+}

package/src/web/components/ui/start-ellipsis.tsx

@@ -0,0 +1,18 @@
+/**
+ * Ellipsize from the start, so the end of a string — the part that differs —
+ * survives.
+ *
+ * A right-to-left box cuts at its left edge, and `<bdi>` keeps the name itself
+ * reading left to right; the isolate is load-bearing rather than tidy, because
+ * outside one a leading `.` takes the paragraph's direction and `.gitignore`
+ * renders as `gitignore.`. Used for file paths, where the filename is the
+ * distinguishing part, and for branch names, where a repository's branches all
+ * begin `fix/NX-`.
+ */
+export function StartEllipsis({ children }: { children: string }) {
+  return (
+    <span dir="rtl" className="truncate text-left min-w-0 flex-1">
+      <bdi>{children}</bdi>
+    </span>
+  );
+}

package/src/web/hooks/use-chat-account-claim.ts

@@ -1,7 +1,22 @@
 import { useCallback, useEffect, useRef } from "react";
 import { pickAccountForTab, type PickedAccount } from "@/lib/api-settings";
-import { usePanelStore } from "@/stores/panel-store";
-import { patchTabMetadata } from "@/lib/patch-tab-metadata";
+import { getPrepare, prepareFoundNoAccount } from "@/lib/new-chat-prepare-client";
+import { currentTabMetadata, patchTabMetadata } from "@/lib/patch-tab-metadata";
+
+/**
+ * Writes a claimed account into a tab's metadata, unless something else already claims
+ * it for this provider, the tab already has a session, or the tab's provider moved on.
+ * Pure and side-effect-scoped to the store (not a hook), so `/chat/prepare`'s own fan-out
+ * can apply the pick it made server-side the same way a client-driven claim would.
+ */
+export function applyAccountClaim(tabId: string, provider: string, picked: PickedAccount | null): PickedAccount | null {
+  const current = currentTabMetadata(tabId);
+  if (picked && current && !current.sessionId && (!current.pickedAccountId || current.pickedAccountProvider !== provider)
+    && (current.providerPending || current.providerId === provider)) {
+    patchTabMetadata(tabId, { pickedAccountId: picked.id, pickedAccountLabel: picked.label, pickedAccountProvider: provider });
+  }
+  return picked;
+}
 
 /** One claim per tab/provider, shared by background preparation and an early send. */
 export function useChatAccountClaim(tabId: string | undefined, providerId: string, enabled: boolean) {
@@ -10,24 +25,33 @@ export function useChatAccountClaim(tabId: string | undefined, providerId: strin
   useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);
   const claim = useCallback((provider: string): Promise<PickedAccount | null> => {
     if (!tabId) return Promise.resolve(null);
-    const metadata = usePanelStore.getState().getPanelForTab(tabId)?.tabs.find((t) => t.id === tabId)?.metadata;
+    const metadata = currentTabMetadata(tabId);
     if (metadata?.pickedAccountProvider === provider && typeof metadata.pickedAccountId === "string") {
       return Promise.resolve({ id: metadata.pickedAccountId, label: typeof metadata.pickedAccountLabel === "string" ? metadata.pickedAccountLabel : null });
     }
-    const applyClaim = (picked: PickedAccount | null) => {
-      const current = usePanelStore.getState().getPanelForTab(tabId)?.tabs.find((t) => t.id === tabId)?.metadata;
-      if (picked && mounted.current && current && !current.sessionId && (!current.pickedAccountId || current.pickedAccountProvider !== provider)
-        && (current.providerPending || current.providerId === provider)) {
-        patchTabMetadata(tabId, { pickedAccountId: picked.id, pickedAccountLabel: picked.label, pickedAccountProvider: provider });
-      }
-      return picked;
-    };
+    // Prepare already asked the server for this provider and heard "nothing usable". That
+    // answer stands for the tab; only a pick that timed out is worth asking for again.
+    if (prepareFoundNoAccount(tabId, provider)) return Promise.resolve(null);
+    const applyClaim = (picked: PickedAccount | null) => (mounted.current ? applyAccountClaim(tabId, provider, picked) : picked);
     const existing = claims.current.get(provider);
     if (existing) return existing.then(applyClaim);
-    const promise = pickAccountForTab(provider, AbortSignal.timeout(30_000)).then(applyClaim).catch((error) => {
-      if (claims.current.get(provider) === promise) claims.current.delete(provider);
-      throw error;
-    });
+    // A prepare already in flight for this tab may pick this very account server-side —
+    // join it first, so a fast send does not double-pick against the same round-robin.
+    const prepare = getPrepare(tabId);
+    const promise = (prepare ? prepare.catch(() => null) : Promise.resolve(null))
+      .then((): Promise<PickedAccount | null> | PickedAccount | null => {
+        const now = currentTabMetadata(tabId);
+        if (now?.pickedAccountProvider === provider && typeof now.pickedAccountId === "string") {
+          return { id: now.pickedAccountId, label: typeof now.pickedAccountLabel === "string" ? now.pickedAccountLabel : null };
+        }
+        if (prepareFoundNoAccount(tabId, provider)) return null;
+        return pickAccountForTab(provider, AbortSignal.timeout(30_000));
+      })
+      .then(applyClaim)
+      .catch((error) => {
+        if (claims.current.get(provider) === promise) claims.current.delete(provider);
+        throw error;
+      });
     claims.current.set(provider, promise);
     return promise;
   }, [tabId]);