ci: validate #4062 exact head 53553af7

gui/src/components/codex-account-pool-cards.tsx

@@ -83,6 +83,20 @@ export function CodexAccountPoolCards({
         const validationPending = a.health?.reason === "validation_pending";
         const healthLabel = formatOAuthHealthLabel(t, a.health);
         const healthSummary = formatOAuthHealthSummary(t, "codex", a.id, a.health);
+        const hasCustomPriority = normalizeAccountPriority(a.priority) !== DEFAULT_ACCOUNT_PRIORITY;
+        const priorityControl = (
+          <AccountPriorityControl
+            value={a.priority}
+            selectId={`codex-account-priority-${a.id}`}
+            // Every row, not just the one being written: the controller serializes order
+            // writes behind one mutation ref, so a second row's pick would come back "busy"
+            // and be dropped with no toast. Same global lock the pause button uses.
+            // A pending switch counts too — it writes the same pin this clears, so the
+            // controller refuses to overlap them, and that refusal is equally silent.
+            disabled={priorityUpdatingId !== null || switchingId !== null}
+            onChange={(priority) => onPriorityChange(a, priority)}
+          />
+        );
         return (
         <div key={a.id} className={`card ${isNext(a) ? "card-active" : ""}`} style={{ marginBottom: 8 }}>
           <div className="card-head">
@@ -153,6 +167,7 @@ export function CodexAccountPoolCards({
             >
               <summary className="btn btn-ghost btn-sm" aria-label={`${t("codexAuth.moreActions")} — ${a.email}`} title={t("codexAuth.moreActions")}>⋯</summary>
               <div className="codex-account-more-body">
+                {!hasCustomPriority && moreOpen.has(a.id) && priorityControl}
                 <span className="mono text-caption muted">{t("prov.accountId")}: {displayAccountId(a.id)}</span>
                 <button type="button" className="btn btn-ghost btn-sm" onClick={() => idCopy.copy(a.id, a.id)}>
                   {idCopy.outcomeFor(a.id) === "copied" ? t("startup.copied") : t("codexAuth.copyId")}
@@ -174,19 +189,7 @@ export function CodexAccountPoolCards({
           </div>
           <div className="codex-account-identity">
             <div className="codex-account-identity-copy">{a.email}{a.plan ? ` · ${a.plan}` : ""}</div>
-            {(normalizeAccountPriority(a.priority) !== DEFAULT_ACCOUNT_PRIORITY || moreOpen.has(a.id)) && (
-            <AccountPriorityControl
-              value={a.priority}
-              selectId={`codex-account-priority-${a.id}`}
-              // Every row, not just the one being written: the controller serializes order
-              // writes behind one mutation ref, so a second row's pick would come back "busy"
-              // and be dropped with no toast. Same global lock the pause button uses.
-              // A pending switch counts too — it writes the same pin this clears, so the
-              // controller refuses to overlap them, and that refusal is equally silent.
-              disabled={priorityUpdatingId !== null || switchingId !== null}
-              onChange={(priority) => onPriorityChange(a, priority)}
-            />
-            )}
+            {hasCustomPriority && priorityControl}
           </div>
           {healthSummary && (
             <div className="card-sub faint">{healthSummary}</div>

gui/src/styles-codex-set.css

@@ -441,3 +441,37 @@
 .codex-main-hard-lock-dialog .modal-desc { text-wrap: pretty; }
 :lang(ko) .codex-main-hard-lock-copy .card-sub,
 :lang(ko) .codex-main-hard-lock-dialog .modal-desc { word-break: keep-all; }
+
+/* Account-card ⋯ actions share the dashboard's compact popover language instead of
+   reading as a wide floating toolbar. This selector intentionally outranks the later
+   single-class rule in styles.css without moving layout ownership back inline. */
+.codex-account-more .codex-account-more-body {
+  box-sizing: border-box;
+  z-index: var(--z-popover);
+  min-width: min(16rem, calc(100vw - 2rem));
+  max-width: min(22rem, calc(100vw - 2rem));
+  padding: 10px 12px;
+  gap: 6px;
+  justify-content: flex-start;
+  background: var(--raised);
+  border-radius: var(--radius);
+  box-shadow: 0 4px 24px rgb(0 0 0 / 0.14);
+}
+
+/* Layout ownership lives here too. The type-qualified selectors outrank the legacy
+   single-class declarations later in styles.css, so the disclosure stays out of card flow
+   even after styles.css is refreshed from upstream. */
+details.codex-account-more {
+  position: relative;
+  display: inline-block;
+}
+
+details.codex-account-more > .codex-account-more-body {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  flex-basis: auto;
+}

gui/tests/codex-account-more-popover-style.test.ts

@@ -0,0 +1,28 @@
+import { expect, test } from "bun:test";
+
+function ruleBody(css: string, selector: string): string {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(`${escaped}\\s*\\{([^}]*)\\}`).exec(css)?.[1] ?? "";
+}
+
+test("account more-actions uses the compact dashboard popover language", async () => {
+  const css = await Bun.file(new URL("../src/styles-codex-set.css", import.meta.url)).text();
+  const wrapper = ruleBody(css, "details.codex-account-more");
+  const layout = ruleBody(css, "details.codex-account-more > .codex-account-more-body");
+  const visual = ruleBody(css, ".codex-account-more .codex-account-more-body");
+
+  expect(wrapper).toMatch(/position:\s*relative/);
+  expect(wrapper).toMatch(/display:\s*inline-block/);
+  expect(layout).toMatch(/position:\s*absolute/);
+  expect(layout).toMatch(/top:\s*calc\(100% \+ 6px\)/);
+  expect(layout).toMatch(/right:\s*0/);
+  expect(layout).toMatch(/flex-basis:\s*auto/);
+
+  expect(visual).toMatch(/z-index:\s*var\(--z-popover\)/);
+  expect(visual).toMatch(/min-width:\s*min\(16rem, calc\(100vw - 2rem\)\)/);
+  expect(visual).toMatch(/max-width:\s*min\(22rem, calc\(100vw - 2rem\)\)/);
+  expect(visual).toMatch(/background:\s*var\(--raised\)/);
+  expect(visual).toMatch(/border-radius:\s*var\(--radius\)/);
+  expect(visual).toMatch(/box-shadow:\s*0 4px 24px rgb\(0 0 0 \/ 0\.14\)/);
+  expect(visual).toMatch(/justify-content:\s*flex-start/);
+});

gui/tests/codex-account-more-priority-placement.test.tsx

@@ -0,0 +1,118 @@
+import { afterEach, beforeEach, expect, test } from "bun:test";
+import { Window } from "happy-dom";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { CodexAccountPoolCards } from "../src/components/codex-account-pool-cards";
+import type { CodexAccountEntry } from "../src/components/codex-account-pool-types";
+import { LanguageProvider } from "../src/i18n/provider";
+
+const globals = ["document", "window", "navigator", "localStorage", "IS_REACT_ACT_ENVIRONMENT"] as const;
+type GlobalName = (typeof globals)[number];
+const prioritySelector = "#codex-account-priority-pool-1";
+
+let previous: Record<GlobalName, PropertyDescriptor | undefined>;
+let testWindow: Window;
+let root: Root | null = null;
+let host: HTMLElement;
+
+function restoreProperty(target: object, key: PropertyKey, descriptor: PropertyDescriptor | undefined): void {
+  if (descriptor) Object.defineProperty(target, key, descriptor);
+  else Reflect.deleteProperty(target, key);
+}
+
+beforeEach(() => {
+  previous = Object.fromEntries(
+    globals.map(key => [key, Object.getOwnPropertyDescriptor(globalThis, key)]),
+  ) as typeof previous;
+  testWindow = new Window({ url: "http://localhost/" });
+  Object.defineProperties(globalThis, {
+    document: { configurable: true, value: testWindow.document },
+    window: { configurable: true, value: testWindow },
+    navigator: { configurable: true, value: testWindow.navigator },
+    localStorage: { configurable: true, value: testWindow.localStorage },
+    IS_REACT_ACT_ENVIRONMENT: { configurable: true, value: true },
+  });
+  host = testWindow.document.createElement("div") as never as HTMLElement;
+  testWindow.document.body.appendChild(host as never);
+});
+
+afterEach(async () => {
+  if (root) await act(async () => root?.unmount());
+  root = null;
+  for (const key of globals) restoreProperty(globalThis, key, previous[key]);
+  await testWindow.happyDOM?.close?.();
+});
+
+function account(priority: number): CodexAccountEntry {
+  return {
+    id: "pool-1",
+    email: "pool@example.test",
+    isMain: false,
+    paused: false,
+    priority,
+    hasCredential: true,
+    quota: null,
+    quotaAutoRefresh: {
+      fiveHourAvailable: false,
+      weeklyAvailable: false,
+      fiveHourEnabled: false,
+      weeklyEnabled: false,
+    },
+  };
+}
+
+async function mount(priority: number): Promise<void> {
+  await act(async () => {
+    root = createRoot(host);
+    root.render(
+      <LanguageProvider>
+        <CodexAccountPoolCards
+          pool={[account(priority)]}
+          activeId={null}
+          accountModeState={null}
+          switchActionLabel="Switch"
+          threshold={80}
+          onOpenReset={() => undefined}
+          onSwitch={() => undefined}
+          onTogglePause={() => undefined}
+          pauseUpdatingId={null}
+          pauseBusy={false}
+          onPriorityChange={() => undefined}
+          priorityUpdatingId={null}
+          switchingId={null}
+          pinnedId={null}
+          onReauth={() => undefined}
+          onEditAlias={() => undefined}
+          onRemove={() => undefined}
+        />
+      </LanguageProvider>,
+    );
+  });
+}
+
+test("default priority selector is rendered once inside the open more-actions panel", async () => {
+  await mount(0);
+  const more = host.querySelector<HTMLDetailsElement>("details.codex-account-more");
+  expect(more).not.toBeNull();
+  expect(host.querySelectorAll(prioritySelector)).toHaveLength(0);
+
+  await act(async () => {
+    more!.querySelector<HTMLElement>("summary")!.click();
+    await new Promise<void>(resolve => testWindow.setTimeout(resolve, 0));
+  });
+
+  expect(more!.open).toBe(true);
+  expect(host.querySelectorAll(prioritySelector)).toHaveLength(1);
+  expect(more!.querySelector(prioritySelector)).not.toBeNull();
+  expect(host.querySelector(`.codex-account-identity ${prioritySelector}`)).toBeNull();
+});
+
+test("non-default priority selector is rendered once inline and out of the closed disclosure", async () => {
+  await mount(2);
+  const more = host.querySelector<HTMLDetailsElement>("details.codex-account-more");
+  expect(more).not.toBeNull();
+  expect(more!.open).toBe(false);
+  expect(host.querySelectorAll(prioritySelector)).toHaveLength(1);
+  expect(more!.querySelector(prioritySelector)).toBeNull();
+  expect(host.querySelector(`.codex-account-identity ${prioritySelector}`)).not.toBeNull();
+});