@opengeni/react 0.15.0 → 0.23.0

package/src/components/message-timeline.tsx

@@ -20,6 +20,7 @@ import type { ComponentType } from "react";
 import { AnimatePresence, motion } from "motion/react";
 import { Collapsible } from "radix-ui";
 import {
+  memo,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -108,6 +109,8 @@ export type MessageTimelineProps = {
   className?: string | undefined;
 };
 
+const INITIAL_MOUNTED_GROUPS = 1;
+
 /**
  * The session timeline: chat messages with streaming deltas, collapsed
  * activity clusters (reasoning, tool calls, sandbox work), spawned-worker
@@ -132,8 +135,10 @@ export function MessageTimeline({
   className,
 }: MessageTimelineProps) {
   const resolvedItems = useMemo(() => items ?? buildTimeline(events ?? []), [items, events]);
-  const groups = useMemo(() => groupTimeline(resolvedItems), [resolvedItems]);
-  const firstGroupKey = groups[0] ? timelineGroupKey(groups[0]) : null;
+  const allGroups = useMemo(() => groupTimeline(resolvedItems), [resolvedItems]);
+  const keyedGroups = useStableTimelineGroupKeys(allGroups);
+  const { mountedGroups: groups, mountingOlderGroups } = useProgressivelyMountedGroups(keyedGroups);
+  const firstGroupKey = allGroups[0] ? timelineGroupKey(allGroups[0]) : null;
 
   const scrollRef = useRef<HTMLDivElement | null>(null);
   const topSentinelRef = useRef<HTMLDivElement | null>(null);
@@ -178,7 +183,8 @@ export function MessageTimeline({
   const firstKeyChangedForBulk =
     previousBulkFirstKeyRef.current !== undefined &&
     previousBulkFirstKeyRef.current !== firstGroupKey;
-  const bulkRender = groups.length > 0 && (bulkActive || firstKeyChangedForBulk);
+  const bulkRender =
+    allGroups.length > 0 && (bulkActive || firstKeyChangedForBulk || mountingOlderGroups);
 
   // Snapshot the topmost visible element and where it sits in the viewport, so a
   // later reflow can restore it to the same spot. Transient chrome (the backfill
@@ -221,10 +227,10 @@ export function MessageTimeline({
   // A cleared timeline (stream identity change) re-arms the reveal so the next
   // session also first paints at its bottom.
   useLayoutEffect(() => {
-    if (groups.length === 0 && revealed) {
+    if (allGroups.length === 0 && revealed) {
       setRevealed(false);
     }
-  }, [groups.length, revealed]);
+  }, [allGroups.length, revealed]);
 
   // Clear the bulk-paint marker a frame after it renders, so rows appended
   // live (streams, new turns) animate exactly as before.
@@ -234,9 +240,15 @@ export function MessageTimeline({
       return;
     }
     setBulkActive(true);
+    // Initial tails and prepended history mount from newest to oldest across
+    // frames. Keep every row born during that bulk window animation-free; only
+    // clear the marker after the authoritative group list is fully mounted.
+    if (mountingOlderGroups) {
+      return;
+    }
     const frame = requestFrame(() => setBulkActive(false));
     return () => cancelFrame(frame);
-  }, [bulkRender, firstGroupKey]);
+  }, [bulkRender, firstGroupKey, mountingOlderGroups]);
 
   // Prefetch older history well before the reader reaches the top: the
   // sentinel sits above the first group and trips 1600px early, so backfill
@@ -248,6 +260,7 @@ export function MessageTimeline({
     if (
       !root ||
       !target ||
+      mountingOlderGroups ||
       !hasOlder ||
       loadingOlder ||
       !onLoadOlder ||
@@ -265,7 +278,7 @@ export function MessageTimeline({
     );
     observer.observe(target);
     return () => observer.disconnect();
-  }, [hasOlder, loadingOlder, onLoadOlder, firstGroupKey]);
+  }, [hasOlder, loadingOlder, onLoadOlder, firstGroupKey, mountingOlderGroups]);
 
   // Scroll anchoring: when the content reflows (a fold expands/collapses, a
   // stream appends), keep following the bottom if pinned; otherwise pin the
@@ -338,7 +351,7 @@ export function MessageTimeline({
                     <p className="py-10 text-center text-sm text-og-fg-subtle">No activity yet.</p>
                   ))
                 : null}
-              {hasOlder ? (
+              {hasOlder && !mountingOlderGroups ? (
                 <div
                   ref={topSentinelRef}
                   data-og-top-sentinel=""
@@ -352,9 +365,9 @@ export function MessageTimeline({
                   <span className="og-shimmer-text font-medium">Loading earlier activity…</span>
                 </div>
               ) : null}
-              {groups.map((group, index) => (
+              {groups.map(({ group, key }, index) => (
                 <TimelineGroupView
-                  key={timelineGroupKey(group)}
+                  key={key}
                   group={group}
                   renderMessageText={renderMessageText}
                   onOpenSession={onOpenSession}
@@ -362,7 +375,7 @@ export function MessageTimeline({
                   onReconnect={onReconnect}
                   resolveProviderLogo={resolveProviderLogo}
                   toolRegistry={toolRegistry}
-                  foldLiveCluster={isAgentProgress(groups[index + 1])}
+                  foldLiveCluster={isAgentProgress(groups[index + 1]?.group)}
                 />
               ))}
               {working ? (
@@ -406,6 +419,141 @@ export function MessageTimeline({
   );
 }
 
+type MountedGroupWindow = {
+  groupKeys: string[];
+  visibleStart: number;
+};
+
+type KeyedTimelineGroup = {
+  group: TimelineGroup;
+  key: string;
+};
+
+/**
+ * Projection can legitimately change a group's content-derived key while
+ * retaining its existing rows. The common pagination case is an older activity
+ * item merging into the first activity group; live appends grow the same group
+ * from the other side. Match the new authoritative groups to the previous
+ * committed groups by their durable item IDs so both the React key and the
+ * progressive-window anchor survive either change.
+ */
+function useStableTimelineGroupKeys(allGroups: TimelineGroup[]): KeyedTimelineGroup[] {
+  const previousRef = useRef<KeyedTimelineGroup[]>([]);
+  const keyedGroups = useMemo(() => {
+    const previousByItemId = new Map<string, KeyedTimelineGroup>();
+    for (const previous of previousRef.current) {
+      for (const itemId of timelineGroupItemIds(previous.group)) {
+        previousByItemId.set(itemId, previous);
+      }
+    }
+
+    const usedKeys = new Set<string>();
+    return allGroups.map((group, index) => {
+      const itemIds = timelineGroupItemIds(group);
+      let retainedKey: string | undefined;
+      for (const itemId of itemIds) {
+        const previous = previousByItemId.get(itemId);
+        if (previous && !usedKeys.has(previous.key)) {
+          retainedKey = previous.key;
+          break;
+        }
+      }
+
+      const canonicalKey = timelineGroupKey(group);
+      let key = retainedKey ?? canonicalKey;
+      let collision = 0;
+      while (usedKeys.has(key)) {
+        key = `${canonicalKey}:${index}:${collision}`;
+        collision += 1;
+      }
+      usedKeys.add(key);
+      return { group, key };
+    });
+  }, [allGroups]);
+
+  useLayoutEffect(() => {
+    previousRef.current = keyedGroups;
+  }, [keyedGroups]);
+
+  return keyedGroups;
+}
+
+/**
+ * Bulk history is already projected into its authoritative order before this
+ * hook runs. Mount its newest group first, then prepend one older group per
+ * animation frame so low-end browsers can paint and service input between
+ * React/Markdown commits instead of doing the entire tail in one long task.
+ *
+ * A live append does not move the first mounted key, so it is included
+ * immediately in the mounted suffix. A history prepend moves that key deeper
+ * in the array; shifting `visibleStart` by that exact prefix keeps every
+ * existing row mounted while the new prefix is revealed. If projection
+ * coalesces the seam item itself away, the earliest surviving mounted key
+ * provides the same anchor. Replacements with no shared mounted key (for
+ * example a session switch or clear-view) start a fresh suffix.
+ */
+function useProgressivelyMountedGroups(allGroups: KeyedTimelineGroup[]): {
+  mountedGroups: KeyedTimelineGroup[];
+  mountingOlderGroups: boolean;
+} {
+  const previousGroupKeysRef = useRef<string[]>([]);
+  const groupKeys = useMemo(() => {
+    const nextKeys = allGroups.map((group) => group.key);
+    const previousKeys = previousGroupKeysRef.current;
+    return nextKeys.length === previousKeys.length &&
+      nextKeys.every((key, index) => key === previousKeys[index])
+      ? previousKeys
+      : nextKeys;
+  }, [allGroups]);
+  useLayoutEffect(() => {
+    previousGroupKeysRef.current = groupKeys;
+  }, [groupKeys]);
+  const [window, setWindow] = useState<MountedGroupWindow>(() => ({
+    groupKeys,
+    visibleStart: Math.max(0, allGroups.length - INITIAL_MOUNTED_GROUPS),
+  }));
+
+  const lastPossibleStart = Math.max(0, allGroups.length - INITIAL_MOUNTED_GROUPS);
+  let visibleStart = 0;
+  if (allGroups.length > 0) {
+    const currentIndexByKey = new Map(groupKeys.map((key, index) => [key, index]));
+    let retainedStart: number | undefined;
+    for (const key of window.groupKeys.slice(window.visibleStart)) {
+      const index = currentIndexByKey.get(key);
+      if (index !== undefined) {
+        retainedStart = index;
+        break;
+      }
+    }
+    visibleStart =
+      retainedStart === undefined ? lastPossibleStart : Math.min(retainedStart, lastPossibleStart);
+  }
+
+  useEffect(() => {
+    // Synchronize a prepend/replacement before scheduling its first reveal.
+    if (window.groupKeys !== groupKeys || window.visibleStart !== visibleStart) {
+      setWindow({ groupKeys, visibleStart });
+      return;
+    }
+    if (visibleStart === 0) {
+      return;
+    }
+    const frame = requestFrame(() => {
+      setWindow((current) =>
+        current.groupKeys === groupKeys && current.visibleStart > 0
+          ? { ...current, visibleStart: current.visibleStart - 1 }
+          : current,
+      );
+    });
+    return () => cancelFrame(frame);
+  }, [groupKeys, visibleStart, window.groupKeys, window.visibleStart]);
+
+  return {
+    mountedGroups: allGroups.slice(visibleStart),
+    mountingOlderGroups: visibleStart > 0,
+  };
+}
+
 function requestFrame(callback: FrameRequestCallback): number {
   if (typeof requestAnimationFrame === "function") {
     return requestAnimationFrame(callback);
@@ -421,7 +569,11 @@ function cancelFrame(id: number): void {
   window.clearTimeout(id);
 }
 
-function TimelineGroupView({
+// Progressive history mounting reuses the exact group objects from `allGroups`.
+// Skip repainting those stable rows on every prefix reveal; live projection
+// creates a new group object, and behavior/callback changes are separate props,
+// so ordinary streaming and host updates still invalidate immediately.
+const TimelineGroupView = memo(function TimelineGroupView({
   group,
   renderMessageText,
   onOpenSession,
@@ -531,7 +683,7 @@ function TimelineGroupView({
         />
       );
   }
-}
+});
 
 function timelineGroupKey(group: TimelineGroup): string {
   switch (group.kind) {
@@ -544,6 +696,17 @@ function timelineGroupKey(group: TimelineGroup): string {
   }
 }
 
+function timelineGroupItemIds(group: TimelineGroup): string[] {
+  switch (group.kind) {
+    case "item":
+      return [group.item.id];
+    case "activity":
+      return group.items.map((item) => item.id);
+    case "turn":
+      return group.groups.flatMap(timelineGroupItemIds);
+  }
+}
+
 /** The agent has moved PAST a cluster only when what follows is more agent
     progress — new activity, a settled turn, or narration. A waiting notice
     (approval pause), a pending queued message, a goal pill, or nothing at all
@@ -998,12 +1161,12 @@ function NoticeRow({ item }: { item: NoticeItem }) {
 }
 
 /**
- * The inline reconnect card: a lapsed connection surfaces as a calm, tappable
- * affordance — provider logo, one human line, one primary Reconnect button —
- * instead of a raw "linear.app needs to be reconnected." string. The `reason`
- * only shapes the helper copy; no domain or enum code is shown as a label.
- * `onReconnect` (from the app, which owns the SDK client) runs the flow; without
- * it, a pre-minted authorization link is offered, or the card stays informative.
+ * The inline connection-recovery card: missing or lapsed access surfaces as a
+ * calm, tappable affordance instead of a raw provider-domain error. The `reason`
+ * only shapes human copy; no domain or enum code is shown as a label.
+ * `onReconnect` (from the app, which owns the SDK client) starts the flow;
+ * without it, a pre-minted authorization link is offered, or the card stays
+ * informative. Recovery never claims to resume/replay the failed tool call.
  */
 function AuthNeededRow({
   item,
@@ -1018,6 +1181,10 @@ function AuthNeededRow({
   const [busy, setBusy] = useState(false);
   const [failed, setFailed] = useState(false);
   const provider = providerLabel(item.providerDomain);
+  const unavailable =
+    item.reason === "unsupported_auth" || item.reason === "resource_scope_unavailable";
+  const missing = item.reason === "missing_connection";
+  const actionLabel = missing ? "Connect" : "Reconnect";
 
   const start = async () => {
     if (!onReconnect || busy) {
@@ -1028,6 +1195,7 @@ function AuthNeededRow({
     try {
       // On success the app redirects to consent (or routes to credential entry),
       // so this row unmounts; a resolve without navigation just relaxes the button.
+      // The callback starts authorization only. It never resumes this tool call.
       await onReconnect(item);
       setBusy(false);
     } catch {
@@ -1045,11 +1213,13 @@ function AuthNeededRow({
             label={provider}
           />
           <div className="min-w-0">
-            <p className="truncate text-og-md font-medium text-og-fg">Reconnect {provider}</p>
+            <p className="truncate text-og-md font-medium text-og-fg">
+              {unavailable ? `${provider} tools unavailable` : `${actionLabel} ${provider}`}
+            </p>
             <p className="truncate text-og-sm text-og-fg-subtle">{authReasonLine(item.reason)}</p>
           </div>
         </div>
-        {onReconnect ? (
+        {!unavailable && onReconnect ? (
           <button
             type="button"
             onClick={() => void start()}
@@ -1060,9 +1230,9 @@ function AuthNeededRow({
             )}
           >
             <RefreshCwIcon className={cn("size-3.5", busy && "animate-og-spin")} aria-hidden />
-            {busy ? "Reconnecting…" : "Reconnect"}
+            {busy ? "Opening…" : actionLabel}
           </button>
-        ) : item.authorizationUrl ? (
+        ) : !unavailable && item.authorizationUrl ? (
           <a
             href={item.authorizationUrl}
             rel="noreferrer"
@@ -1073,13 +1243,19 @@ function AuthNeededRow({
             )}
           >
             <RefreshCwIcon className="size-3.5" aria-hidden />
-            Reconnect
+            {actionLabel}
           </a>
         ) : null}
       </div>
+      {!unavailable ? (
+        <p className="px-1 text-og-xs text-og-fg-subtle">
+          This tool call wasn't replayed. After {missing ? "connecting" : "reconnecting"}, send a
+          new message to try again.
+        </p>
+      ) : null}
       {failed ? (
         <p className="px-1 text-og-xs text-og-status-failed">
-          Couldn't start reconnecting {provider}. Try again.
+          Couldn't start {missing ? "connecting" : "reconnecting"} {provider}. Try again.
         </p>
       ) : null}
     </div>
@@ -1160,6 +1336,10 @@ function authReasonLine(reason: AuthNeededItem["reason"]): string {
     case "expired":
     case "refresh_failed":
       return "Its access expired.";
+    case "unsupported_auth":
+      return "This connection cannot authenticate the configured tool endpoint.";
+    case "resource_scope_unavailable":
+      return "This tool endpoint cannot enforce the selected repository access.";
     default:
       return "Its connection needs attention.";
   }

package/src/components/model-picker.tsx

@@ -12,6 +12,8 @@ export type ModelPickerProps = {
   onChange: (modelId: string) => void;
   disabled?: boolean | undefined;
   className?: string | undefined;
+  /** Visible-to-assistive-technology label. Defaults to "Model". */
+  label?: string | undefined;
 };
 
 /**
@@ -25,7 +27,14 @@ export type ModelPickerProps = {
  * the send path. Renders nothing when no models are exposed, so a single-model
  * deployment shows no chrome.
  */
-export function ModelPicker({ models, value, onChange, disabled, className }: ModelPickerProps) {
+export function ModelPicker({
+  models,
+  value,
+  onChange,
+  disabled,
+  className,
+  label = "Model",
+}: ModelPickerProps) {
   const selectId = useId();
   // Group by provider, preserving first-seen order for both the providers and
   // the models within each — the server already orders the list (default model
@@ -50,14 +59,14 @@ export function ModelPicker({ models, value, onChange, disabled, className }: Mo
   return (
     <span className={cn("relative inline-flex items-center", className)}>
       <label htmlFor={selectId} className="sr-only">
-        Model
+        {label}
       </label>
       <select
         id={selectId}
         value={value ?? ""}
         onChange={(event) => onChange(event.target.value)}
         disabled={disabled === true}
-        aria-label="Model"
+        aria-label={label}
         className={cn(
           // Sized like the other footer controls; the chevron overlay needs the
           // right padding so the value never collides with it.

package/src/components/pierre-diff.tsx

@@ -78,6 +78,20 @@ export function PierreDiff({
   className,
 }: PierreDiffProps) {
   const [failed, setFailed] = useState(false);
+  const [forcedColors, setForcedColors] = useState(false);
+
+  // Pierre's rich renderer distinguishes additions/deletions primarily through
+  // foreground and background colors inside a shadow root. In Windows forced-
+  // colors mode those paints intentionally collapse, so expose the literal
+  // unified patch (+/- markers) instead of leaving changed lines ambiguous.
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia("(forced-colors: active)");
+    const update = () => setForcedColors(query.matches);
+    update();
+    query.addEventListener?.("change", update);
+    return () => query.removeEventListener?.("change", update);
+  }, []);
 
   // Probe the import once so a hard failure (peer missing) shows `fallback`
   // rather than a Suspense boundary that never resolves. Skipped when `plain`.
@@ -92,11 +106,18 @@ export function PierreDiff({
     };
   }, [plain]);
 
-  if (plain || failed) {
+  if (plain || failed || forcedColors) {
     // `plain` opts out of highlighting; `failed` = `@pierre/diffs` not installed.
     // Render the caller's fallback, or a plain (unhighlighted) patch dump — NOT a
     // second hunk renderer. One highlighted renderer (Pierre) + a text degrade.
-    return <div className={className}>{fallback ?? <PlainPatch diff={diff} />}</div>;
+    return (
+      <div
+        className={className}
+        data-opengeni-plain-diff={forcedColors ? "forced-colors" : "fallback"}
+      >
+        {fallback ?? <PlainPatch diff={diff} />}
+      </div>
+    );
   }
 
   // Default to the dark theme: the host UI is dark-first, and Pierre's own
@@ -131,13 +152,15 @@ export function PierreDiff({
     "--diffs-fg-number-addition-override": "var(--og-color-status-idle)",
     "--diffs-fg-number-deletion-override": "var(--og-color-status-failed)",
     "--diffs-bg-addition-override":
-      "color-mix(in oklch, var(--og-color-status-idle) 12%, var(--og-color-bg))",
+      "color-mix(in oklab, var(--og-color-status-idle) 12%, var(--og-color-bg))",
     "--diffs-bg-deletion-override":
-      "color-mix(in oklch, var(--og-color-status-failed) 12%, var(--og-color-bg))",
+      "color-mix(in oklab, var(--og-color-status-failed) 12%, var(--og-color-bg))",
     "--diffs-bg-addition-emphasis-override":
-      "color-mix(in oklch, var(--og-color-status-idle) 22%, var(--og-color-bg))",
+      "color-mix(in oklab, var(--og-color-status-idle) 22%, var(--og-color-bg))",
     "--diffs-bg-deletion-emphasis-override":
-      "color-mix(in oklch, var(--og-color-status-failed) 22%, var(--og-color-bg))",
+      "color-mix(in oklab, var(--og-color-status-failed) 22%, var(--og-color-bg))",
+    "--diffs-header-font-family": "var(--og-font-sans)",
+    "--diffs-font-family": "var(--og-font-mono)",
     "--diffs-font-size": "var(--og-code-font-size)",
     "--diffs-line-height": "var(--og-code-line-height)",
   } as CSSProperties;
@@ -177,7 +200,10 @@ function PlainPatch({ diff }: { diff: GitFileDiff[] }) {
       {diff.map((file) => (
         <pre
           key={file.path}
+          aria-label={`Diff for ${file.path}`}
           className="mb-2 overflow-auto whitespace-pre rounded-og-sm border border-og-border bg-og-bg/60 p-2.5 font-og-mono text-og-xs leading-5"
+          role="region"
+          tabIndex={0}
         >
           {gitFileDiffToPatch(file)
             .split("\n")

package/src/components/queue-draft-policy.ts

@@ -0,0 +1,18 @@
+import type { ComposerState } from "../hooks/use-composer";
+
+/**
+ * Decide whether checking out a queued prompt would replace current composer
+ * content. `hasDraftContent` reads the synchronous draft refs, so this stays
+ * correct even when a controlled input update has not rendered yet.
+ */
+export function requestQueueDraftEdit(
+  composer: Pick<ComposerState, "hasDraftContent">,
+  confirmReplacement: () => void,
+  editImmediately: () => void,
+): void {
+  if (composer.hasDraftContent()) {
+    confirmReplacement();
+  } else {
+    editImmediately();
+  }
+}