@opengeni/react 0.44.5 → 0.46.1

package/src/components/message-timeline.tsx

@@ -36,6 +36,11 @@ import { cn } from "../lib/cn";
 import { formatClockTime, formatRelativeTime, truncate } from "../lib/format";
 import { prefersReducedMotion } from "../lib/motion";
 import { Markdown } from "./markdown";
+import {
+  UserMessageBody,
+  UserMessageDisclosureProvider,
+  type UserMessageDisclosureContextValue,
+} from "./user-message-body";
 import {
   createTipFollowState,
   readerScrollUpPx,
@@ -358,6 +363,13 @@ export function MessageTimeline({
    * one scroll event (or fired two) — use a count, and clear to 0 on echo.
    */
   const programmaticScrollRef = useRef(0);
+  /**
+   * Disclosure height changes are not reader navigation. While an unpinned
+   * Show more/less state is active, its clamp/native-anchor scroll echoes must
+   * never geometrically re-enable bottom-follow. A later real reader navigation
+   * or explicit Jump to latest releases this fence.
+   */
+  const disclosureKeepsUnpinnedRef = useRef(false);
   /**
    * Unarmed scroll-away observed; waiting for scrollend (or rAF fallback).
    * Blocks layout tip-follow so a stream token cannot yank before leave settles.
@@ -369,6 +381,7 @@ export function MessageTimeline({
   // deliberate chip remounts (activity→turn wrap, nested key flips) so a fold
   // that already settled closed — or that the reader closed — never reopens.
   const foldMemoryRef = useRef<Map<string, FoldRestingState>>(new Map());
+  const userMessageDisclosureMemoryRef = useRef<Map<string, boolean>>(new Map());
   const seenActivityIdsRef = useRef<Set<string>>(new Set());
   const groupKeyByItemIdRef = useRef<Map<string, string>>(new Map());
   const groupOffsetByKeyRef = useRef<Map<string, number>>(new Map());
@@ -513,16 +526,20 @@ export function MessageTimeline({
     target: EventTarget | null;
     currentTarget: EventTarget | null;
   }) => {
-    // Nested overflow (code / notice pre) or mostly-horizontal pan: not tip leave.
-    if (event.deltaY >= 0) {
-      return;
-    }
+    // Nested overflow (code / notice pre) or mostly-horizontal pan: not
+    // timeline reader intent. A real timeline wheel in either direction
+    // releases the disclosure fence; downward movement may then re-pin
+    // naturally when it reaches the bottom.
     if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) {
       return;
     }
     if (wheelConsumedByNestedScrollable(event)) {
       return;
     }
+    disclosureKeepsUnpinnedRef.current = false;
+    if (event.deltaY >= 0) {
+      return;
+    }
     const node =
       event.currentTarget instanceof HTMLElement ? event.currentTarget : scrollRef.current;
     releasePinFromReader(node);
@@ -546,10 +563,21 @@ export function MessageTimeline({
     ) {
       return;
     }
+    disclosureKeepsUnpinnedRef.current = false;
     readerIntentArmRef.current = true;
   };
 
   const onKeyDown = (event: { key: string; currentTarget: EventTarget | null }) => {
+    if (
+      event.key === "ArrowUp" ||
+      event.key === "ArrowDown" ||
+      event.key === "PageUp" ||
+      event.key === "PageDown" ||
+      event.key === "Home" ||
+      event.key === "End"
+    ) {
+      disclosureKeepsUnpinnedRef.current = false;
+    }
     if (event.key !== "ArrowUp" && event.key !== "PageUp" && event.key !== "Home") {
       return;
     }
@@ -574,6 +602,65 @@ export function MessageTimeline({
     [cancelLeaveFallback, stopFollow, syncScrollBaseline, writeScrollTop],
   );
 
+  const beginUserMessageDisclosureChange = useCallback(
+    (messageBody: HTMLElement, disclosureControl: HTMLElement) => {
+      const node = scrollRef.current;
+      if (!node || !node.contains(messageBody)) {
+        return null;
+      }
+      const keepBottom = autoFollow && pinnedRef.current && !hasNewerRef.current;
+      if (keepBottom) {
+        return () => {
+          const current = scrollRef.current;
+          if (current) {
+            snapToBottom(current);
+          }
+        };
+      }
+
+      disclosureKeepsUnpinnedRef.current = true;
+
+      const scrollerRect = node.getBoundingClientRect();
+      const group = messageBody.closest<HTMLElement>("[data-og-timeline-group-anchor]");
+      const groupRect = group?.getBoundingClientRect();
+      // Expanding from a visible message top keeps the beginning in place.
+      // Collapsing after reading deep in the message keeps the disclosure
+      // control in place because the message top is already above the viewport.
+      const anchor =
+        group &&
+        groupRect &&
+        groupRect.top >= scrollerRect.top - 1 &&
+        groupRect.top < scrollerRect.bottom
+          ? group
+          : disclosureControl;
+      const beforeTop = anchor.getBoundingClientRect().top - scrollerRect.top;
+
+      return () => {
+        const current = scrollRef.current;
+        if (!current || !current.contains(anchor)) {
+          return;
+        }
+        const currentScrollerTop = current.getBoundingClientRect().top;
+        const afterTop = anchor.getBoundingClientRect().top - currentScrollerTop;
+        const delta = afterTop - beforeTop;
+        if (Math.abs(delta) > 0.5) {
+          writeScrollTop(current, current.scrollTop + delta);
+        }
+        applyPinned(false);
+        syncScrollBaseline(current);
+      };
+    },
+    [applyPinned, autoFollow, snapToBottom, syncScrollBaseline, writeScrollTop],
+  );
+
+  const userMessageDisclosureContext = useMemo<UserMessageDisclosureContextValue>(
+    () => ({
+      expandedByMessageId: userMessageDisclosureMemoryRef.current,
+      beginChange: beginUserMessageDisclosureChange,
+    }),
+    [beginUserMessageDisclosureChange],
+  );
+
   const driveFollowRef = useRef<(node: HTMLElement, now?: number) => void>(() => undefined);
   const driveFollow = useCallback(
     (node: HTMLElement, nowMs?: number) => {
@@ -868,6 +955,8 @@ export function MessageTimeline({
     groupKeyByItemIdRef.current = new Map();
     groupOffsetByKeyRef.current = new Map();
     foldMemoryRef.current.clear();
+    userMessageDisclosureMemoryRef.current.clear();
+    disclosureKeepsUnpinnedRef.current = false;
     seenActivityIdsRef.current.clear();
     applyPinned(true);
   }, [allGroups.length, revealed, applyPinned]);
@@ -1045,6 +1134,12 @@ export function MessageTimeline({
     if (programmatic) {
       programmaticScrollRef.current = 0;
     }
+    if (disclosureKeepsUnpinnedRef.current) {
+      stopFollow();
+      applyPinned(false);
+      syncScrollBaseline(node);
+      return;
+    }
 
     if (autoFollow && pinnedRef.current && !hasNewer) {
       // Fold / composer / SessionChrome: viewport shrink raises maxScroll without
@@ -1144,6 +1239,13 @@ export function MessageTimeline({
       return;
     }
     cancelLeaveFallback();
+    if (disclosureKeepsUnpinnedRef.current) {
+      programmaticScrollRef.current = 0;
+      stopFollow();
+      applyPinned(false);
+      syncScrollBaseline(node);
+      return;
+    }
     if (programmaticScrollRef.current > 0) {
       programmaticScrollRef.current = 0;
       syncScrollBaseline(node);
@@ -1164,6 +1266,8 @@ export function MessageTimeline({
           Unpinned: native scroll anchoring holds the reader's place. */}
                   <div
                     ref={scrollRef}
+                    data-og-timeline-scroller=""
+                    data-og-bottom-follow={autoFollow && pinned && !hasNewer ? "true" : "false"}
                     tabIndex={-1}
                     onScroll={onScroll}
                     onScrollEnd={onScrollEnd}
@@ -1224,21 +1328,23 @@ export function MessageTimeline({
                                 turnSummary,
                               ]}
                             >
-                              <TimelineGroupView
-                                group={group}
-                                renderMessageText={renderMessageText}
-                                onOpenSession={onOpenSession}
-                                onMemoryClick={onMemoryClick}
-                                onReconnect={onReconnect}
-                                resolveProviderLogo={resolveProviderLogo}
-                                toolRegistry={toolRegistry}
-                                turnSummary={turnSummary}
-                                foldLiveCluster={isAgentProgress(next)}
-                                trailingAgentText={trailingAgentTextAfterTurn(group, next)}
-                                contextCompactionCount={
-                                  contextCompactionCount > 0 ? contextCompactionCount : undefined
-                                }
-                              />
+                              <UserMessageDisclosureProvider value={userMessageDisclosureContext}>
+                                <TimelineGroupView
+                                  group={group}
+                                  renderMessageText={renderMessageText}
+                                  onOpenSession={onOpenSession}
+                                  onMemoryClick={onMemoryClick}
+                                  onReconnect={onReconnect}
+                                  resolveProviderLogo={resolveProviderLogo}
+                                  toolRegistry={toolRegistry}
+                                  turnSummary={turnSummary}
+                                  foldLiveCluster={isAgentProgress(next)}
+                                  trailingAgentText={trailingAgentTextAfterTurn(group, next)}
+                                  contextCompactionCount={
+                                    contextCompactionCount > 0 ? contextCompactionCount : undefined
+                                  }
+                                />
+                              </UserMessageDisclosureProvider>
                             </TimelineGroupRenderBoundary>
                           </div>
                         );
@@ -1354,6 +1460,7 @@ export function MessageTimeline({
                         exit={{ opacity: 0, y: 8 }}
                         transition={{ duration: 0.15, ease: "easeOut" }}
                         onClick={() => {
+                          disclosureKeepsUnpinnedRef.current = false;
                           if (hasNewer) {
                             // Do not pin against the current history page — its bottom
                             // is not the tip. The pin + snap run when the tip window
@@ -2077,12 +2184,12 @@ function CompactionRow({ item }: { item: ContextCompactionItem }) {
       : null;
   const title =
     item.phase === "started"
-      ? "Compacting conversation memory…"
+      ? "Compacting conversation history…"
       : item.phase === "compacted"
         ? before && after
-          ? `Conversation memory compacted · ~${before} → ~${after} tokens`
-          : "Conversation memory compacted"
-        : "Couldn’t compact conversation memory";
+          ? `Conversation history compacted · ~${before} → ~${after} estimated history tokens`
+          : "Conversation history compacted"
+        : "Couldn’t compact conversation history";
   const subtitle =
     item.phase === "compacted"
       ? "Chat history above is unchanged"
@@ -2140,7 +2247,7 @@ function MessageFooterTime({ occurredAt }: { occurredAt: string }) {
       className={cn(
         "shrink-0 tabular-nums text-og-xs text-og-fg-subtle",
         "opacity-0 transition-opacity duration-150",
-        "group-hover/copy:opacity-100 group-focus-within/copy:opacity-100 pointer-coarse:opacity-70",
+        "group-hover/copy:opacity-100 group-focus-within/copy:opacity-100 pointer-coarse:opacity-100",
       )}
     >
       {formatClockTime(occurredAt)}
@@ -2171,7 +2278,9 @@ function UserMessageRow({
             {renderMessageText ? (
               renderMessageText(item.text, item)
             ) : (
-              <Markdown>{item.text}</Markdown>
+              <UserMessageBody messageId={item.id} text={item.text}>
+                <Markdown>{item.text}</Markdown>
+              </UserMessageBody>
             )}
           </div>
         </CopyHoverFrame>

package/src/components/model-picker.tsx

@@ -100,7 +100,7 @@ export function ModelPicker({
         disabled={disabled === true}
         aria-label={label}
         className={cn(
-          "h-8 max-w-[180px] cursor-pointer appearance-none truncate rounded-og-md bg-transparent",
+          "h-8 max-w-[180px] cursor-pointer appearance-none truncate rounded-og-md bg-transparent pointer-coarse:h-11",
           "py-0 pl-2 pr-6 text-[13px] text-og-fg-muted",
           "transition-colors duration-150 hover:bg-og-surface-2 hover:text-og-fg",
           "focus:outline-none focus-visible:outline-none",

package/src/components/model-policy-picker.tsx

@@ -573,7 +573,7 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
           disabled={props.disabled}
           aria-label={messages.label}
           className={cn(
-            "og-root inline-flex h-[var(--og-model-picker-trigger-height)] min-w-0 max-w-64 items-center gap-1 rounded-full border border-transparent px-2.5 text-og-control text-og-fg-muted outline-none transition-colors hover:border-og-border hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50 max-sm:h-[var(--og-model-picker-trigger-height-mobile)] max-sm:max-w-[7.5rem] max-sm:px-2",
+            "og-root inline-flex h-[var(--og-model-picker-trigger-height)] min-w-0 max-w-64 items-center gap-1 rounded-full border border-transparent px-2.5 text-og-control text-og-fg-muted outline-none transition-colors hover:border-og-border hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50 max-sm:h-11 max-sm:max-w-[7.5rem] max-sm:px-2",
             props.className,
           )}
         >

package/src/components/user-message-body.tsx

@@ -0,0 +1,341 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { cn } from "../lib/cn";
+
+const FALLBACK_LINE_THRESHOLD = 12;
+const FALLBACK_TEXT_THRESHOLD = 900;
+const FALLBACK_UNBROKEN_THRESHOLD = 260;
+const INTERACTIVE_DESCENDANT_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "button",
+  "input:not([type='hidden'])",
+  "select",
+  "textarea",
+  "iframe",
+  "object",
+  "embed",
+  "audio[controls]",
+  "video[controls]",
+  "summary",
+  "[contenteditable]:not([contenteditable='false'])",
+  "[tabindex]",
+  "[role='button']",
+  "[role='link']",
+  "[role='checkbox']",
+  "[role='radio']",
+  "[role='switch']",
+  "[role='slider']",
+  "[role='spinbutton']",
+  "[role='textbox']",
+  "[role='combobox']",
+  "[role='listbox']",
+  "[role='menuitem']",
+  "[role='option']",
+  "[role='tab']",
+  "[role='treeitem']",
+].join(",");
+
+function composedParentElement(element: Element): Element | null {
+  if (element.assignedSlot) {
+    return element.assignedSlot;
+  }
+  if (element.parentElement) {
+    return element.parentElement;
+  }
+  const root = element.getRootNode();
+  return typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot ? root.host : null;
+}
+
+function hasComposedInertAncestor(element: Element, boundary: Element): boolean {
+  let current: Element | null = element;
+  while (current) {
+    if (current.hasAttribute("inert")) {
+      return true;
+    }
+    if (current === boundary) {
+      return false;
+    }
+    current = composedParentElement(current);
+  }
+  return false;
+}
+
+/**
+ * Native inert crosses shadow boundaries, but ordinary selectors do not.
+ * Recursively inspect open roots control-by-control so visible shadow content
+ * stays interactive. An opaque custom-element host is the conservative focus
+ * boundary for a closed root that cannot be inspected.
+ */
+function collectInteractionBoundaries(root: ParentNode): HTMLElement[] {
+  const boundaries: HTMLElement[] = [];
+  const scopes: ParentNode[] = [root];
+  for (let scopeIndex = 0; scopeIndex < scopes.length; scopeIndex += 1) {
+    for (const element of scopes[scopeIndex]!.querySelectorAll("*")) {
+      if (!(element instanceof HTMLElement)) {
+        continue;
+      }
+      const shadowRoot = element.shadowRoot;
+      const opaqueCustomElement = element.localName.includes("-") && !shadowRoot;
+      if (element.matches(INTERACTIVE_DESCENDANT_SELECTOR) || opaqueCustomElement) {
+        boundaries.push(element);
+      }
+      if (shadowRoot) {
+        scopes.push(shadowRoot);
+      }
+    }
+  }
+  return boundaries;
+}
+
+function isFullyInsideVisiblePreview(rect: DOMRect, clipRect: DOMRect): boolean {
+  return (
+    rect.width > 0 &&
+    rect.height > 0 &&
+    rect.top >= clipRect.top - 1 &&
+    rect.bottom <= clipRect.bottom + 1 &&
+    rect.left >= clipRect.left - 1 &&
+    rect.right <= clipRect.right + 1
+  );
+}
+
+type RestoreDisclosureAnchor = (() => void) | null;
+
+export type UserMessageDisclosureContextValue = {
+  expandedByMessageId: Map<string, boolean>;
+  beginChange: (
+    messageBody: HTMLElement,
+    disclosureControl: HTMLElement,
+  ) => RestoreDisclosureAnchor;
+};
+
+const UserMessageDisclosureContext = createContext<UserMessageDisclosureContextValue | null>(null);
+
+export function UserMessageDisclosureProvider({
+  value,
+  children,
+}: {
+  value: UserMessageDisclosureContextValue;
+  children: ReactNode;
+}) {
+  return (
+    <UserMessageDisclosureContext.Provider value={value}>
+      {children}
+    </UserMessageDisclosureContext.Provider>
+  );
+}
+
+/**
+ * Deterministic first-paint fallback for runtimes without layout measurement.
+ * Real browsers replace this estimate with the rendered-height decision in the
+ * first layout effect. The complete text always remains mounted either way.
+ */
+export function userMessageLikelyNeedsDisclosure(text: string): boolean {
+  const lines = text.split(/\r?\n/);
+  return (
+    lines.length > FALLBACK_LINE_THRESHOLD ||
+    text.length > FALLBACK_TEXT_THRESHOLD ||
+    lines.some((line) => line.length > FALLBACK_UNBROKEN_THRESHOLD)
+  );
+}
+
+export type UserMessageBodyProps = {
+  /** Durable timeline item id. Expansion memory is keyed by this value. */
+  messageId: string;
+  /** Complete source text. Used only for the deterministic measurement fallback. */
+  text: string;
+  children: ReactNode;
+  className?: string | undefined;
+};
+
+/**
+ * Lossless disclosure boundary for already-sent user-message text.
+ *
+ * The full rendered subtree always remains in the DOM. A real browser decides
+ * whether disclosure is needed from rendered height (including Markdown
+ * structure and wrapping); the source-text heuristic is only a deterministic
+ * fallback for SSR/test environments without layout. Timeline-owned context
+ * remembers expansion per durable message id and preserves the reader's scroll
+ * anchor when height changes.
+ */
+export function UserMessageBody({ messageId, text, children, className }: UserMessageBodyProps) {
+  const disclosure = useContext(UserMessageDisclosureContext);
+  const [expanded, setExpanded] = useState(
+    () => disclosure?.expandedByMessageId.get(messageId) ?? false,
+  );
+  const [collapsible, setCollapsible] = useState(() => userMessageLikelyNeedsDisclosure(text));
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const clipRef = useRef<HTMLDivElement | null>(null);
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const thresholdRef = useRef<HTMLSpanElement | null>(null);
+  const pendingRestoreRef = useRef<RestoreDisclosureAnchor>(null);
+  const managedInertDescendantsRef = useRef(new Set<HTMLElement>());
+  const contentId = `og-user-message-${useId().replace(/:/g, "")}`;
+  const collapsed = collapsible && !expanded;
+
+  const restoreManagedInertDescendants = useCallback(() => {
+    for (const descendant of managedInertDescendantsRef.current) {
+      if (descendant.hasAttribute("data-og-user-message-managed-inert")) {
+        descendant.removeAttribute("inert");
+        descendant.removeAttribute("data-og-user-message-managed-inert");
+      }
+    }
+    managedInertDescendantsRef.current.clear();
+  }, []);
+
+  const syncCollapsedInteractivity = useCallback(() => {
+    restoreManagedInertDescendants();
+    if (!collapsed) {
+      return;
+    }
+
+    const clip = clipRef.current;
+    const content = contentRef.current;
+    if (!clip || !content) {
+      return;
+    }
+
+    const clipRect = clip.getBoundingClientRect();
+    if (clipRect.height <= 0) {
+      return;
+    }
+
+    for (const descendant of collectInteractionBoundaries(content)) {
+      if (hasComposedInertAncestor(descendant, content)) {
+        continue;
+      }
+      const rect = descendant.getBoundingClientRect();
+      if (isFullyInsideVisiblePreview(rect, clipRect)) {
+        continue;
+      }
+      descendant.setAttribute("inert", "");
+      descendant.setAttribute("data-og-user-message-managed-inert", "");
+      managedInertDescendantsRef.current.add(descendant);
+    }
+  }, [collapsed, restoreManagedInertDescendants]);
+
+  const measure = useCallback(() => {
+    const content = contentRef.current;
+    const threshold = thresholdRef.current;
+    if (!content || !threshold) {
+      return;
+    }
+    const renderedHeight = Math.max(content.scrollHeight, content.getBoundingClientRect().height);
+    const collapseHeight = Math.max(
+      threshold.offsetHeight,
+      threshold.getBoundingClientRect().height,
+    );
+    setCollapsible(
+      renderedHeight > 0 && collapseHeight > 0
+        ? renderedHeight > collapseHeight + 1
+        : userMessageLikelyNeedsDisclosure(text),
+    );
+  }, [text]);
+
+  useLayoutEffect(() => {
+    measure();
+    const content = contentRef.current;
+    const threshold = thresholdRef.current;
+    const observer =
+      typeof ResizeObserver === "undefined"
+        ? null
+        : new ResizeObserver(() => {
+            measure();
+            syncCollapsedInteractivity();
+          });
+    if (content) {
+      observer?.observe(content);
+    }
+    if (threshold) {
+      observer?.observe(threshold);
+    }
+    const handleResize = () => {
+      measure();
+      syncCollapsedInteractivity();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [measure, syncCollapsedInteractivity]);
+
+  useLayoutEffect(() => {
+    syncCollapsedInteractivity();
+    return restoreManagedInertDescendants;
+  });
+
+  useLayoutEffect(() => {
+    const restore = pendingRestoreRef.current;
+    pendingRestoreRef.current = null;
+    restore?.();
+  }, [expanded]);
+
+  const toggle = (control: HTMLButtonElement) => {
+    const root = rootRef.current;
+    pendingRestoreRef.current = root && disclosure ? disclosure.beginChange(root, control) : null;
+    const next = !expanded;
+    if (!next && contentRef.current?.contains(document.activeElement)) {
+      control.focus({ preventScroll: true });
+    }
+    disclosure?.expandedByMessageId.set(messageId, next);
+    setExpanded(next);
+  };
+
+  return (
+    <div
+      ref={rootRef}
+      data-og-user-message-body=""
+      data-og-message-id={messageId}
+      data-og-expanded={expanded ? "true" : "false"}
+      className={cn("relative min-w-0", className)}
+    >
+      <span
+        ref={thresholdRef}
+        aria-hidden="true"
+        className="pointer-events-none absolute h-56 w-0 invisible sm:h-72"
+      />
+      <div
+        ref={clipRef}
+        id={contentId}
+        data-og-user-message-clip=""
+        className={cn("relative min-w-0", collapsed && "max-h-56 overflow-hidden sm:max-h-72")}
+      >
+        <div
+          ref={contentRef}
+          data-og-user-message-content=""
+          className="min-w-0 [overflow-wrap:anywhere]"
+        >
+          {children}
+        </div>
+        {collapsed ? (
+          <span
+            aria-hidden="true"
+            data-og-user-message-fade=""
+            className="pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-og-surface-2 via-og-surface-2/90 to-transparent"
+          />
+        ) : null}
+      </div>
+      {collapsible ? (
+        <button
+          type="button"
+          aria-controls={contentId}
+          aria-expanded={expanded}
+          data-og-user-message-disclosure=""
+          className="mt-1.5 inline-flex min-h-7 items-center rounded-og-sm px-1.5 text-og-xs font-medium text-og-fg-muted outline-none transition-colors hover:bg-og-surface-3/60 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/45 pointer-coarse:min-h-11"
+          onClick={(event) => toggle(event.currentTarget)}
+        >
+          {expanded ? "Show less" : "Show more"}
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/hooks/use-codex-accounts.ts

@@ -80,7 +80,7 @@ export type UseCodexAccountsResult = {
 
 const EMPTY_SETTINGS: CodexRotationSettings = {
   rotationEnabled: false,
-  rotationStrategy: "most_remaining",
+  rotationStrategy: "sharded",
   activeCredentialId: null,
 };