@opengeni/react 0.29.0 → 0.32.1

package/src/timeline/projection.ts

@@ -10,6 +10,7 @@ import type {
   AgentMessageItem,
   ActivityItem,
   AuthNeededItem,
+  ContextCompactionItem,
   GoalItem,
   MachineInputBatchItem,
   MemoryItem,
@@ -165,12 +166,17 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
         // Reconcile the most recent same-turn agent message — even when
         // activity (tool calls, reasoning) landed after its deltas — so the
         // completed text never duplicates the streamed one.
-        const open = [...items]
-          .reverse()
-          .find(
-            (item): item is AgentMessageItem =>
-              item.kind === "agent-message" && item.turnId === turnId,
-          );
+        let openIndex = -1;
+        for (let index = items.length - 1; index >= 0; index -= 1) {
+          const candidate = items[index];
+          if (candidate?.kind === "agent-message" && candidate.turnId === turnId) {
+            openIndex = index;
+            break;
+          }
+        }
+        const candidate = openIndex >= 0 ? items[openIndex] : undefined;
+        const open: AgentMessageItem | undefined =
+          candidate?.kind === "agent-message" ? candidate : undefined;
         if (
           open &&
           (open.streaming || !open.text || text === open.text || text.startsWith(open.text))
@@ -180,6 +186,15 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
             open.text = text || open.text;
           }
           open.streaming = false;
+          // The SDK can emit a hosted-tool item only after its provider-native
+          // operation has completed, even though answer deltas were already
+          // streamed. The completed message event is the durable ordering
+          // authority, so move the reconciled row after any intervening tool
+          // activity instead of leaving completed web searches below the answer.
+          if (openIndex < items.length - 1) {
+            items.splice(openIndex, 1);
+            items.push(open);
+          }
           break;
         }
         if (text) {
@@ -236,6 +251,26 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
           });
           break;
         }
+        // Live Responses `web_search_call` events and the later SDK
+        // `RunToolCallItem` share the same item id. Merge so mid-stream cards
+        // do not duplicate when the step finally materializes.
+        if (callId) {
+          const existing = [...items]
+            .reverse()
+            .find(
+              (item): item is ToolCallItem => item.kind === "tool-call" && item.callId === callId,
+            );
+          if (existing) {
+            if (args != null) {
+              existing.arguments = args;
+            }
+            if (payload.raw !== undefined) {
+              existing.raw = mergeToolCallRaw(existing.raw, payload.raw);
+            }
+            existing.status = providerNativeToolStatus(existing.raw);
+            break;
+          }
+        }
         items.push({
           kind: "tool-call",
           id: event.id,
@@ -247,7 +282,7 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
           // The provider-native item drives the per-tool renderers (apply_patch
           // operation, computer_call action, web_search providerData, …).
           raw: payload.raw,
-          status: "running",
+          status: providerNativeToolStatus(payload.raw),
           occurredAt: event.occurredAt,
         });
         break;
@@ -383,7 +418,12 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
         if (previous?.status === status) {
           break;
         }
-        items.push({ kind: "session-status", id: event.id, status, occurredAt: event.occurredAt });
+        items.push({
+          kind: "session-status",
+          id: event.id,
+          status,
+          occurredAt: event.occurredAt,
+        });
         break;
       }
 
@@ -399,24 +439,36 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
         break;
       }
 
+      case "session.context.compaction.requested":
+      case "session.context.compaction.started": {
+        closeStreamingTail();
+        settleOrPushContextCompaction(items, {
+          id: event.id,
+          turnId,
+          phase: "started",
+          trigger: compactionTrigger(payload),
+          estimatedTokensBefore: numberOrNull(payload.estimatedTokensBefore),
+          estimatedTokensAfter: null,
+          skipReason: null,
+          implementation:
+            typeof payload.implementation === "string" ? payload.implementation : null,
+          occurredAt: event.occurredAt,
+        });
+        break;
+      }
+
       case "session.context.compacted": {
         closeStreamingTail();
-        const before =
-          typeof payload.estimatedTokensBefore === "number"
-            ? Math.round(payload.estimatedTokensBefore).toLocaleString("en-US")
-            : null;
-        const after =
-          typeof payload.estimatedTokensAfter === "number"
-            ? Math.round(payload.estimatedTokensAfter).toLocaleString("en-US")
-            : null;
-        items.push({
-          kind: "notice",
+        settleOrPushContextCompaction(items, {
           id: event.id,
-          tone: "waiting",
-          text:
-            before && after
-              ? `Active conversation history compacted from approximately ${before} to ${after} tokens.`
-              : "Context compacted so the turn could continue.",
+          turnId,
+          phase: "compacted",
+          trigger: compactionTrigger(payload),
+          estimatedTokensBefore: numberOrNull(payload.estimatedTokensBefore),
+          estimatedTokensAfter: numberOrNull(payload.estimatedTokensAfter),
+          skipReason: null,
+          implementation:
+            typeof payload.implementation === "string" ? payload.implementation : null,
           occurredAt: event.occurredAt,
         });
         break;
@@ -424,21 +476,16 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
 
       case "session.context.compaction.skipped": {
         closeStreamingTail();
-        const reason = typeof payload.reason === "string" ? payload.reason : null;
-        items.push({
-          kind: "notice",
+        settleOrPushContextCompaction(items, {
           id: event.id,
-          tone: reason === "summarization_failed" ? "failed" : "waiting",
-          text:
-            reason === "no_history"
-              ? "Context compaction skipped because there is no active history to compact."
-              : reason === "replacement_not_smaller"
-                ? "Context compaction skipped because the generated checkpoint would not reduce the context."
-                : reason === "replacement_unchanged"
-                  ? "Context compaction stopped because it reproduced the same checkpoint without making progress."
-                  : reason === "summarization_failed"
-                    ? "Context compaction failed without replacing the active conversation history. Request it again to retry."
-                    : "Context compaction was not needed.",
+          turnId,
+          phase: "skipped",
+          trigger: compactionTrigger(payload),
+          estimatedTokensBefore: numberOrNull(payload.estimatedTokensBefore),
+          estimatedTokensAfter: null,
+          skipReason: typeof payload.reason === "string" ? payload.reason : null,
+          implementation:
+            typeof payload.implementation === "string" ? payload.implementation : null,
           occurredAt: event.occurredAt,
         });
         break;
@@ -485,8 +532,8 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
       case "turn.completed": {
         // A standalone manual compaction uses the turn ledger for fencing and
         // recovery, but it is maintenance rather than a conversational turn.
-        // The dedicated session.context.compacted notice is the complete UI
-        // truth; adding a generic turn chip would falsely make it look like an
+        // The dedicated context-compaction landmark is the complete UI truth;
+        // adding a generic turn chip would falsely make it look like an
         // extra agent response.
         if (payload.maintenance === "context_compaction") {
           finalizeOpen(turnId);
@@ -607,9 +654,74 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
     }
   }
 
+  for (const item of items) {
+    if (item.kind === "agent-message") {
+      item.text = stripOpaqueCitationTokens(item.text);
+    }
+  }
   return items;
 }
 
+function providerNativeToolStatus(rawValue: unknown): ToolCallItem["status"] {
+  const raw = asRecord(rawValue);
+  if (raw.type !== "hosted_tool_call") {
+    return "running";
+  }
+  switch (raw.status) {
+    case "completed":
+      return "complete";
+    case "failed":
+    case "incomplete":
+      return "failed";
+    case "cancelled":
+      return "cancelled";
+    default:
+      return "running";
+  }
+}
+
+/**
+ * Prefer newer status/fields, but keep earlier providerData.action when a
+ * progress-only Responses event arrives without the search query payload.
+ */
+function mergeToolCallRaw(existingValue: unknown, nextValue: unknown): unknown {
+  const existing = asRecord(existingValue);
+  const next = asRecord(nextValue);
+  if (Object.keys(next).length === 0) {
+    return existingValue;
+  }
+  const existingProvider = asRecord(existing.providerData);
+  const nextProvider = asRecord(next.providerData);
+  const providerData = {
+    ...existingProvider,
+    ...nextProvider,
+  };
+  if (
+    existingProvider.action != null &&
+    (nextProvider.action == null ||
+      (typeof nextProvider.action === "object" &&
+        nextProvider.action !== null &&
+        Object.keys(nextProvider.action as object).length === 0))
+  ) {
+    providerData.action = existingProvider.action;
+  }
+  return {
+    ...existing,
+    ...next,
+    ...(Object.keys(providerData).length > 0 ? { providerData } : {}),
+  };
+}
+
+/**
+ * Codex subscription web search can return private citation handles without
+ * the URL annotation table that would make them resolvable. Keep the canonical
+ * model-history item untouched, but never expose those unusable handles in the
+ * human timeline. Ordinary markdown links and structured URL citations remain.
+ */
+export function stripOpaqueCitationTokens(text: string): string {
+  return text.replace(/\s*cite(?:[^]+)+/gu, "");
+}
+
 /** The turn-end payload shape, as `isCreditExhaustion` wants it. */
 function isCreditExhaustionPayload(payload: Record<string, unknown>): boolean {
   return isCreditExhaustion({
@@ -689,7 +801,11 @@ export function groupTimeline(items: TimelineItem[]): TimelineGroup[] {
       if (open?.kind === "activity" && open.outcome === undefined) {
         open.items.push(item);
       } else {
-        groups.push({ kind: "activity", id: `activity-${item.id}`, items: [item] });
+        groups.push({
+          kind: "activity",
+          id: `activity-${item.id}`,
+          items: [item],
+        });
       }
       continue;
     }
@@ -776,7 +892,12 @@ function prescanTurnAnchors(events: SessionEvent[]): TurnAnchorPrescan {
     }
   }
 
-  return { queuedTurnByTrigger, startSeqByTrigger, cancelledBeforeStartTriggers, startedTurnIds };
+  return {
+    queuedTurnByTrigger,
+    startSeqByTrigger,
+    cancelledBeforeStartTriggers,
+    startedTurnIds,
+  };
 }
 
 function orderTimelineEvents(events: SessionEvent[], prescan: TurnAnchorPrescan): SessionEvent[] {
@@ -963,6 +1084,13 @@ function foldSettledTurn(groups: TimelineGroup[], turnEnd: TurnEndItem): void {
   }
 
   const firstOccurredAt = groupStartedAt(body[0]) ?? turnEnd.occurredAt;
+  const prior = startIndex > 0 ? groups[startIndex - 1] : undefined;
+  const contextCompactionCount =
+    prior?.kind === "item" &&
+    prior.item.kind === "context-compaction" &&
+    prior.item.phase === "compacted"
+      ? 1
+      : 0;
   const turnGroup: TimelineGroup = {
     kind: "turn",
     id: `turn-${turnEnd.turnId ?? turnEnd.id}`,
@@ -970,6 +1098,7 @@ function foldSettledTurn(groups: TimelineGroup[], turnEnd: TurnEndItem): void {
     startedAt: firstOccurredAt,
     endedAt: turnEnd.occurredAt,
     groups: body,
+    ...(contextCompactionCount > 0 ? { contextCompactionCount } : {}),
   };
   if (turnEnd.failureText) {
     turnGroup.failureText = turnEnd.failureText;
@@ -987,6 +1116,7 @@ function isTurnBoundary(group: TimelineGroup | undefined): boolean {
     group?.kind === "turn" ||
     (group?.kind === "item" &&
       (group.item.kind === "user-message" ||
+        group.item.kind === "context-compaction" ||
         (group.item.kind === "notice" && group.item.tone === "input")))
   );
 }
@@ -1053,6 +1183,61 @@ function stringValue(value: unknown): string {
   return typeof value === "string" ? value : "";
 }
 
+function numberOrNull(value: unknown): number | null {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+
+function compactionTrigger(payload: Record<string, unknown>): ContextCompactionItem["trigger"] {
+  const trigger = payload.trigger;
+  return trigger === "auto" ||
+    trigger === "operator" ||
+    trigger === "proactive" ||
+    trigger === "overflow"
+    ? trigger
+    : null;
+}
+
+/**
+ * Keep one landmark per turn: a later started/compacted/skipped settles the
+ * open started row instead of stacking notices.
+ */
+function settleOrPushContextCompaction(
+  items: TimelineItem[],
+  next: Omit<ContextCompactionItem, "kind">,
+): void {
+  const openIndex = findOpenContextCompactionIndex(items, next.turnId);
+  if (openIndex >= 0) {
+    const open = items[openIndex];
+    if (open?.kind === "context-compaction") {
+      items[openIndex] = {
+        ...open,
+        ...next,
+        // Prefer the settled event id so keys stay stable with the finish row.
+        id: next.phase === "started" ? open.id : next.id,
+        trigger: next.trigger ?? open.trigger,
+        estimatedTokensBefore: next.estimatedTokensBefore ?? open.estimatedTokensBefore,
+        implementation: next.implementation ?? open.implementation,
+      };
+      return;
+    }
+  }
+  items.push({ kind: "context-compaction", ...next });
+}
+
+function findOpenContextCompactionIndex(items: TimelineItem[], turnId: string | null): number {
+  for (let index = items.length - 1; index >= 0; index -= 1) {
+    const item = items[index];
+    if (item?.kind !== "context-compaction" || item.phase !== "started") {
+      continue;
+    }
+    if (turnId && item.turnId && item.turnId !== turnId) {
+      continue;
+    }
+    return index;
+  }
+  return -1;
+}
+
 function machineInputMembers(value: unknown): MachineInputBatchItem["members"] {
   const kinds = new Set<MachineInputBatchItem["members"][number]["kind"]>([
     "scheduled_occurrence",

package/src/timeline/seen-activity-ids.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+
+/* ----------------------------------------------------------------------------
+   Seen activity ids
+
+   ActivityRails remount across fold wraps / settle key flips. A per-rail
+   previousIds set resets on remount, so either every row re-fades (flash) or
+   the first live tool never animates (pop). This map lives on MessageTimeline
+   and records every activity id that has already painted — live appends of
+   unknown ids earn row-enter; remounts of known ids stay quiet.
+   -------------------------------------------------------------------------- */
+
+const SeenActivityIdsContext = createContext<Set<string> | null>(null);
+
+export const SeenActivityIdsProvider = SeenActivityIdsContext.Provider;
+
+export function useSeenActivityIds(): Set<string> | null {
+  return useContext(SeenActivityIdsContext);
+}

package/src/timeline/shared.tsx

@@ -164,7 +164,7 @@ export function ActivityDisclosure({
   const inner = (
     <>
       {hasBody ? (
-        <ChevronRightIcon className="size-3.5 shrink-0 text-og-fg-subtle transition-transform duration-150 ease-og-in-out group-data-[state=open]/disclosure:rotate-90" />
+        <ChevronRightIcon className="size-3.5 shrink-0 text-og-fg-subtle transition-transform duration-[var(--og-duration-disclose)] ease-og-in-out group-data-[state=open]/disclosure:rotate-90" />
       ) : (
         <span className="size-3.5 shrink-0" />
       )}

package/src/timeline/tool-renderers.tsx

@@ -698,15 +698,84 @@ function ComputerCallRenderer({ item }: ToolRendererProps) {
 
 type WebSearchResult = { title: string; domain: string; snippet: string };
 
+/** Pull a search string from tool-call arguments when providerData.action is sparse. */
+function webSearchQueryFromArguments(args: unknown): string | null {
+  if (typeof args === "string") {
+    const trimmed = args.trim();
+    if (!trimmed) {
+      return null;
+    }
+    try {
+      return webSearchQueryFromArguments(JSON.parse(trimmed));
+    } catch {
+      return trimmed;
+    }
+  }
+  if (!args || typeof args !== "object") {
+    return null;
+  }
+  const record = args as Record<string, unknown>;
+  if (typeof record.query === "string" && record.query.trim().length > 0) {
+    return record.query;
+  }
+  if (Array.isArray(record.queries)) {
+    const first = record.queries.find(
+      (value): value is string => typeof value === "string" && value.trim().length > 0,
+    );
+    if (first) {
+      return first;
+    }
+  }
+  return null;
+}
+
 function WebSearchRenderer({ item }: ToolRendererProps) {
   const raw = (item.raw ?? {}) as {
-    providerData?: { action?: { query?: string; queries?: string[] } };
+    providerData?: {
+      action?: {
+        type?: string;
+        query?: string;
+        queries?: string[];
+        url?: string;
+        pattern?: string;
+      };
+    };
   };
   const action = raw.providerData?.action ?? {};
-  const query = action.query ?? "(query unavailable)";
-  const queries = action.queries ?? [];
-  const variants = queries.length > 1 ? ` +${queries.length - 1} variants` : "";
+  const actionType = action.type ?? "search";
+  // Responses API deprecated singular `query` in favor of `queries[]`.
+  // Codex/current OpenAI often only populate the array.
+  const queries = (action.queries ?? []).filter(
+    (value): value is string => typeof value === "string" && value.trim().length > 0,
+  );
+  const searchQuery =
+    (typeof action.query === "string" && action.query.trim().length > 0 ? action.query : null) ??
+    queries[0] ??
+    webSearchQueryFromArguments(item.arguments);
   const running = item.status === "running";
+  const query =
+    actionType === "open_page"
+      ? (action.url ?? "(page unavailable)")
+      : actionType === "find_in_page"
+        ? action.pattern && action.url
+          ? `"${action.pattern}" in ${action.url}`
+          : (action.pattern ?? action.url ?? "(page unavailable)")
+        : // Codex often emits the live card before action.query/queries land;
+          // don't flash the scary unavailable copy while still searching.
+          (searchQuery ?? (running ? "…" : "(query unavailable)"));
+  const variants = queries.length > 1 ? ` +${queries.length - 1} variants` : "";
+  const runningTitle =
+    actionType === "open_page"
+      ? "Opening web page"
+      : actionType === "find_in_page"
+        ? "Searching within page"
+        : "Searching the web";
+  const completedTitle =
+    actionType === "open_page"
+      ? "Opened web page"
+      : actionType === "find_in_page"
+        ? "Searched within page"
+        : "Searched the web";
   // web_search may surface a results array on the output when the host enriches it.
   // Filter out null/undefined/non-object entries before casting: host-provided
   // data is untrusted and a null element would throw on result.title access.
@@ -727,7 +796,7 @@ function WebSearchRenderer({ item }: ToolRendererProps) {
       <ActivityDisclosure
         icon={<SearchIcon className={ICON_SIZE} />}
         iconTone="running"
-        title="Searching the web"
+        title={runningTitle}
         running
         preview={<RunningPreview>{`${query}${variants}`}</RunningPreview>}
       >
@@ -740,7 +809,7 @@ function WebSearchRenderer({ item }: ToolRendererProps) {
     <ActivityDisclosure
       icon={<SearchIcon className={ICON_SIZE} />}
       iconTone="muted"
-      title="Searched the web"
+      title={completedTitle}
       preview={`${query}${variants}`}
       failed={item.status === "failed"}
       cancelled={item.status === "cancelled"}