@opengeni/react 3.8.0-canary.1 → 4.0.1-canary.1

package/src/components/markdown-table-layout.ts

@@ -0,0 +1,85 @@
+export function markdownTableWidth({
+  columnLeft,
+  columnWidth,
+  contentLeft,
+  contentRight,
+  preferredWidth,
+}: {
+  columnLeft: number;
+  columnWidth: number;
+  contentLeft: number;
+  contentRight: number;
+  preferredWidth: number;
+}): number {
+  const center = columnLeft + columnWidth / 2;
+  const available = 2 * Math.min(center - contentLeft, contentRight - center);
+  return Math.max(columnWidth, Math.min(preferredWidth, available));
+}
+
+/** Loaded only for assistant tables. Keep prose and nested scroll owners intact. */
+export function observeMarkdownTableLayout(wrapper: HTMLDivElement, table: HTMLTableElement) {
+  const body = wrapper.parentElement;
+  const scroller = body
+    ?.closest("[data-og-wide-table-message]")
+    ?.closest<HTMLElement>("[data-og-timeline-scroller]");
+  if (!body?.classList.contains("og-markdown-body") || !scroller) return;
+
+  let width: number | null = null;
+  const reset = () => {
+    width = null;
+    wrapper.style.width = "";
+    wrapper.style.maxWidth = "";
+    wrapper.style.marginInline = "";
+  };
+  const measure = () => {
+    // Intermediate clipped/scrollable surfaces own their own content bounds.
+    for (
+      let ancestor: HTMLElement | null = body;
+      ancestor && ancestor !== scroller;
+      ancestor = ancestor.parentElement
+    ) {
+      if (getComputedStyle(ancestor).overflowX !== "visible") {
+        reset();
+        return;
+      }
+    }
+    const column = body.getBoundingClientRect();
+    const panel = scroller.getBoundingClientRect();
+    const panelStyle = getComputedStyle(scroller);
+    const left = panel.left + scroller.clientLeft + parseFloat(panelStyle.paddingLeft);
+    const right =
+      panel.left + scroller.clientLeft + scroller.clientWidth - parseFloat(panelStyle.paddingRight);
+
+    // Measure the original table, preserving its wrapping and TSV copy DOM.
+    const previousWidth = table.style.width;
+    let preferred: number;
+    try {
+      table.style.width = "max-content";
+      preferred = table.getBoundingClientRect().width;
+    } finally {
+      table.style.width = previousWidth;
+    }
+    const next = markdownTableWidth({
+      columnLeft: column.left,
+      columnWidth: column.width,
+      contentLeft: left,
+      contentRight: right,
+      preferredWidth: preferred,
+    });
+    if (width !== null && Math.abs(width - next) < 0.5) return;
+    width = next;
+    wrapper.style.width = `${width}px`;
+    wrapper.style.maxWidth = "none";
+    wrapper.style.marginInline = `calc((100% - ${width}px) / 2)`;
+  };
+
+  measure();
+  const observer = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(measure);
+  observer?.observe(scroller);
+  observer?.observe(body);
+  observer?.observe(table);
+  return () => {
+    observer?.disconnect();
+    reset();
+  };
+}

package/src/components/markdown.tsx

@@ -411,9 +411,27 @@ function MarkdownCodeBlock({ children }: { children?: ReactNode }) {
 }
 
 function MarkdownTable({ children, className, ...props }: ComponentPropsWithoutRef<"table">) {
-  const tableRef = useRef<HTMLTableElement | null>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const tableRef = useRef<HTMLTableElement>(null);
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    const table = tableRef.current;
+    if (!wrapper?.closest("[data-og-wide-table-message]") || !table) return;
+    let disposed = false;
+    let cleanup: (() => void) | undefined;
+    // Ordinary tables remain usable even if this optional layout chunk fails.
+    void import("./markdown-table-layout")
+      .then(({ observeMarkdownTableLayout }) => {
+        if (!disposed) cleanup = observeMarkdownTableLayout(wrapper, table);
+      })
+      .catch(() => {});
+    return () => {
+      disposed = true;
+      cleanup?.();
+    };
+  }, [children]);
   return (
-    <div className="group/copy relative mt-3 max-w-full first:mt-0">
+    <div ref={wrapperRef} className="group/copy relative mt-3 max-w-full first:mt-0">
       <div className="pointer-events-none absolute top-0 right-0 z-10">
         <div className="pointer-events-auto">
           <CopyButton

package/src/components/message-timeline.tsx

@@ -293,13 +293,18 @@ function invokeOlderLoad(
   load: OlderHistoryLoader,
   noProgress: () => void,
   attempt: OlderLoadAttempt,
+  preserveTail = false,
 ): 1 | undefined {
   try {
     // Receipt creation is captured synchronously through legacy wrappers such
     // as `() => void loadOlder()`, even when the wrapper discards the return.
-    const result = invokeOlderHistoryLoaderWithReceiptCapture(load, (receipt) => {
-      attempt[2] = receipt;
-    }) as OlderHistoryLoadReceipt | PromiseLike<unknown> | unknown;
+    const result = invokeOlderHistoryLoaderWithReceiptCapture(
+      load,
+      (receipt) => {
+        attempt[2] = receipt;
+      },
+      preserveTail,
+    ) as OlderHistoryLoadReceipt | PromiseLike<unknown> | unknown;
     const receipt =
       attempt[2] ??
       (typeof (result as { committed?: unknown } | undefined)?.committed === "boolean"
@@ -978,7 +983,7 @@ export function MessageTimeline({
       // exact `false` is the first-party request-not-accepted receipt.
       // All other fulfillment retains this exact owner until its prepend
       // boundary commits; promise settlement alone cannot prove progress.
-      invokeOlderLoad(onLoadOlder, noProgress, attempt);
+      invokeOlderLoad(onLoadOlder, noProgress, attempt, !retry);
     },
     [hasOlder, loadingOlder, olderBoundaryKey, onLoadOlder],
   );
@@ -1536,7 +1541,9 @@ export function MessageTimeline({
     }
     const observer = new IntersectionObserver(
       (entries) => {
-        if (entries.some((entry) => entry.isIntersecting)) {
+        // An underfilled history window has both sentinels visible. Advancing
+        // it automatically would undo an explicit older-page navigation.
+        if (maxScrollOf(root) > 1 && entries.some((entry) => entry.isIntersecting)) {
           onLoadNewer();
         }
       },
@@ -1959,7 +1966,9 @@ export function MessageTimeline({
                                     className="pointer-events-auto rounded-full border border-og-border px-3 py-1.5 text-og-control"
                                   >
                                     {underfillRetryReady
-                                      ? "Retry earlier activity"
+                                      ? underfillSettledAttempt?.[2]?.tailPreserved
+                                        ? "Load earlier activity"
+                                        : "Retry earlier activity"
                                       : "Jump to start"}
                                   </button>
                                 ) : null}
@@ -3264,7 +3273,12 @@ function AgentMessageRow({
         )
       }
     >
-      <div data-og-annotation-source-key={item.annotationSource?.eventId}>{body}</div>
+      <div
+        data-og-wide-table-message=""
+        data-og-annotation-source-key={item.annotationSource?.eventId}
+      >
+        {body}
+      </div>
     </CopyHoverFrame>
   );
 }
@@ -3702,6 +3716,32 @@ function formatVideoDuration(seconds: number): string {
 
 function NoticeRow({ item }: { item: NoticeItem }) {
   const enter = useEntranceAnimation();
+  if (item.recordedOutcome) {
+    return (
+      <details
+        className="group text-og-sm text-og-fg-muted"
+        role="note"
+        data-og-recorded-outcome="wait"
+      >
+        <summary className="flex cursor-pointer list-none items-center gap-2 py-1 [&::-webkit-details-marker]:hidden">
+          <ChevronRightIcon
+            aria-hidden
+            className="size-3.5 transition-transform group-open:rotate-90"
+          />
+          <span>
+            Wait recorded ·{" "}
+            <time dateTime={item.occurredAt}>
+              {new Date(item.occurredAt).toLocaleString(undefined, {
+                dateStyle: "medium",
+                timeStyle: "short",
+              })}
+            </time>
+          </span>
+        </summary>
+        <p className="mt-1 whitespace-pre-wrap break-words pl-5 text-og-fg-muted">{item.text}</p>
+      </details>
+    );
+  }
   const tone =
     item.tone === "failed"
       ? "border-og-status-failed/35 bg-og-status-failed/10 text-og-status-failed"

package/src/components/session-commands-panel.tsx

@@ -80,7 +80,13 @@ export function SessionCommandsPanel({
                   </div>
                 </details>
                 <p className="mt-1 text-og-fg-subtle">
-                  {command.state === "stopping" ? "Stopping…" : "Running"}
+                  {command.observationStatus === "unavailable"
+                    ? command.state === "stopping"
+                      ? "Stop requested · status unavailable"
+                      : "Command status unavailable"
+                    : command.state === "stopping"
+                      ? "Stopping…"
+                      : "Running"}
                 </p>
               </div>
               {!readOnly ? (

package/src/components/session-conversation.tsx

@@ -9,13 +9,14 @@ import { useComposer } from "../hooks/use-composer";
 import { useHumanInputRequests } from "../hooks/use-human-input";
 import { ChatComposer, type ChatComposerProps } from "./chat-composer";
 import { QueueSurface } from "./queue-surface";
-import { HumanInputSurface } from "./human-input-surface";
+import { HumanInputSurface, type HumanInputSurfaceProps } from "./human-input-surface";
 import { MessageTimeline } from "./message-timeline";
 import { conversationTimeline } from "../conversation-timeline";
 import { cn } from "../lib/cn";
 
 export type SessionConversationProps = ClientOverride & {
   sessionId: string;
+  loadSkillReview?: HumanInputSurfaceProps["loadSkillReview"];
   className?: string;
   /** Defaults to filling the host. The host owns available height. */
   height?: CSSProperties["height"];
@@ -31,6 +32,7 @@ export function SessionConversation(props: SessionConversationProps) {
 
 function Conversation({
   sessionId,
+  loadSkillReview,
   client,
   workspaceId,
   className,
@@ -89,6 +91,7 @@ function Conversation({
       />
       <div className="min-h-0 max-h-[40%] shrink-0 overflow-y-auto" data-og-conversation-inputs="">
         <HumanInputSurface
+          loadSkillReview={loadSkillReview}
           requests={human.requests}
           onSubmit={async (id, response) => {
             await human.respond(id, response);

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

@@ -15,7 +15,16 @@ import {
 
 /** Events that change which Codex account a session runs on (or just ran). */
 export function isCodexAccountEvent(event: Pick<SessionEvent, "type">): boolean {
-  return event.type === "codex.account.switched";
+  return [
+    "codex.account.switched",
+    "codex.account.selection.changed",
+    "codex.capacity.waiting",
+    "codex.capacity.resumed",
+    "codex.capacity.superseded",
+    "turn.completed",
+    "turn.failed",
+    "turn.cancelled",
+  ].includes(event.type);
 }
 
 /**
@@ -30,12 +39,16 @@ export type CodexAccountsClientLike = {
   getSession?: (
     workspaceId: string,
     sessionId: string,
-  ) => Promise<{ codexPinnedCredentialId?: string | null; codexLastCredentialId?: string | null }>;
+  ) => Promise<{
+    codexPinnedCredentialId?: string | null;
+    codexLastCredentialId?: string | null;
+    codexCurrentSelection?: { credentialId: string | null; waiting: boolean } | null;
+  }>;
   pinSessionCodexAccount?: (
     workspaceId: string,
     sessionId: string,
     target: string,
-  ) => Promise<{ pinned: string }>;
+  ) => Promise<{ pinned: string; appliedTo?: "waiting_turn" | "next_turn" }>;
   /** Optional (absent ⇒ the card hides live refresh): batched live /wham/usage refresh. */
   refreshCodexUsage?: (workspaceId: string) => Promise<{ usage: Record<string, unknown> }>;
 };
@@ -55,8 +68,10 @@ export type UseCodexAccountsResult = {
   activeAccountId: string | null;
   /** The session's PINNED account (null ⇒ following workspace active). */
   pinnedAccountId: string | null;
-  /** The account the next turn will run on: pin > workspace active. */
+  /** Current preference only; automatic allocation can choose another account. */
   effectiveAccountId: string | null;
+  currentSelection: { credentialId: string | null; waiting: boolean } | null;
+  switchAppliedTo: "waiting_turn" | "next_turn" | null;
   /** The account the session's last turn ACTUALLY ran on (the "Running on:" source). */
   lastAccountId: string | null;
   settings: CodexRotationSettings;
@@ -85,6 +100,7 @@ const EMPTY_SETTINGS: CodexRotationSettings = {
 };
 
 type CodexAccountsState = {
+  currentSelection: { credentialId: string | null; waiting: boolean } | null;
   accounts: CodexAccount[];
   activeAccountId: string | null;
   settings: CodexRotationSettings;
@@ -93,6 +109,7 @@ type CodexAccountsState = {
 };
 
 const EMPTY_STATE: CodexAccountsState = {
+  currentSelection: null,
   accounts: [],
   activeAccountId: null,
   settings: EMPTY_SETTINGS,
@@ -121,6 +138,7 @@ export function useCodexAccounts(options: UseCodexAccountsOptions = {}): UseCode
         : Promise.resolve(null);
     const [acc, session] = await Promise.all([accountsP, sessionP]);
     return {
+      currentSelection: session?.codexCurrentSelection ?? null,
       accounts: acc.accounts,
       activeAccountId: acc.activeAccountId,
       settings: acc.settings,
@@ -140,6 +158,10 @@ export function useCodexAccounts(options: UseCodexAccountsOptions = {}): UseCode
   const { run: runMutation, mutating: pinning, mutationError } = useMutationRunner();
   const { run: runUsageMutation, mutating: refreshingUsage } = useMutationRunner();
   const [pinningTarget, setPinningTarget] = useState<string | null>(null);
+  const [switchReceipt, setSwitchReceipt] = useState<{
+    sessionId: string;
+    appliedTo: "waiting_turn" | "next_turn";
+  } | null>(null);
 
   // Refresh only after the durable post-selection event. `turn.started` is
   // emitted before account selection settles and races this authoritative read.
@@ -161,8 +183,10 @@ export function useCodexAccounts(options: UseCodexAccountsOptions = {}): UseCode
         return false;
       }
       setPinningTarget(target);
+      setSwitchReceipt(null);
       const result = await runMutation(async () => {
-        await codexClient.pinSessionCodexAccount!(workspaceId, sessionId, target);
+        const receipt = await codexClient.pinSessionCodexAccount!(workspaceId, sessionId, target);
+        setSwitchReceipt({ sessionId, appliedTo: receipt.appliedTo ?? "next_turn" });
         return true;
       });
       setPinningTarget(null);
@@ -191,6 +215,9 @@ export function useCodexAccounts(options: UseCodexAccountsOptions = {}): UseCode
   const effectiveAccountId = data.pinnedAccountId ?? data.activeAccountId;
 
   return {
+    currentSelection: data.currentSelection,
+    switchAppliedTo:
+      switchReceipt?.sessionId === sessionId ? (switchReceipt?.appliedTo ?? null) : null,
     accounts: data.accounts,
     activeAccountId: data.activeAccountId,
     pinnedAccountId: data.pinnedAccountId,