@opengeni/react 0.34.3 → 0.36.0

package/dist/hooks/use-turn-queue.d.ts

@@ -1,4 +1,4 @@
-import type { ComposerDraft, EffectiveSessionControl, SessionEvent, SessionQueueSnapshot, SessionPendingInputPreview, SessionTurn } from "@opengeni/sdk";
+import type { ComposerDraft, EffectiveSessionControl, McpPersonalConnectionSummary, SessionEvent, SessionQueueSnapshot, SessionPendingInputPreview, SessionTurn } from "@opengeni/sdk";
 import { type EmbeddedSessionClientOverride } from "../session-context";
 import { type SessionEventFeedOptions } from "./internal";
 /** Events that can change the authoritative prompt queue or effective control. */
@@ -15,6 +15,8 @@ export type UseTurnQueueResult = {
     pendingInputs: SessionPendingInputPreview[];
     /** Exact pending members projected to join an already-waiting prompt. */
     pendingInputAttachment: SessionQueueSnapshot["pendingInputAttachment"];
+    /** Secret-safe personal MCP summaries frozen on the exact active turn. */
+    activePersonalConnections: McpPersonalConnectionSummary[];
     effectiveControl: EffectiveSessionControl | null;
     /** The latest interrupted attempt has not yet durably proved physical quiescence. */
     stoppingPreviousAttempt: boolean;

package/dist/index.js

@@ -52,7 +52,7 @@ import {
   useSessionLineage,
   useSessionMcpApprovalPolicy,
   useTurnQueue
-} from "./chunk-4NMH6UJ3.js";
+} from "./chunk-OKKMZDQF.js";
 import {
   ActivityDisclosure,
   ActivityRail,
@@ -106,7 +106,7 @@ import {
   useLightboxOptional,
   useThemeType,
   v4aToGitFileDiff
-} from "./chunk-QRYJCWGD.js";
+} from "./chunk-XT7JF2EH.js";
 import {
   buildTimeline,
   creditExhaustedFromEvents,
@@ -114,7 +114,7 @@ import {
   groupTimeline,
   sessionStatusFromEvents,
   toolDisplayName
-} from "./chunk-MEGI4FS6.js";
+} from "./chunk-J2RVJ6JX.js";
 import {
   Actions,
   AttachButton,

package/dist/session-ui.js

@@ -6,8 +6,8 @@ import {
   SessionChrome,
   TimelineRow,
   sessionChromeGoalPillState
-} from "./chunk-QRYJCWGD.js";
-import "./chunk-MEGI4FS6.js";
+} from "./chunk-XT7JF2EH.js";
+import "./chunk-J2RVJ6JX.js";
 import "./chunk-ATSTR5P3.js";
 import "./chunk-TK7G6XLT.js";
 import "./chunk-LAKLF4PA.js";

package/dist/session.js

@@ -18,7 +18,7 @@ import {
   useSessionLineage,
   useSessionMcpApprovalPolicy,
   useTurnQueue
-} from "./chunk-4NMH6UJ3.js";
+} from "./chunk-OKKMZDQF.js";
 import {
   buildTimeline,
   creditExhaustedFromEvents,
@@ -26,7 +26,7 @@ import {
   groupTimeline,
   sessionStatusFromEvents,
   toolDisplayName
-} from "./chunk-MEGI4FS6.js";
+} from "./chunk-J2RVJ6JX.js";
 import {
   FILE_ONLY_MESSAGE_TEXT,
   composeSendInput,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "0.34.3",
+  "version": "0.36.0",
   "description": "React hooks and styled components for OpenGeni: live session streaming, chat composer, message timeline, session status, and fleet views — token-themed (CSS variables), dark-first, built on Tailwind v4 + Radix + Motion.",
   "license": "Apache-2.0",
   "repository": {
@@ -70,7 +70,7 @@
     "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/noto-sans-arabic": "5.2.10",
     "@fontsource-variable/noto-sans-jp": "5.2.10",
-    "@opengeni/sdk": "^0.34.1",
+    "@opengeni/sdk": "^0.36.0",
     "clsx": "^2.1.1",
     "lucide-react": "^1.8.0",
     "motion": "^12.0.0",

package/src/components/markdown.tsx

@@ -248,7 +248,10 @@ function MarkdownCodeBlock({ children }: { children?: ReactNode }) {
           <CopyButton text={code} label="Copy code" reveal="group-hover" />
         </div>
       </div>
-      <pre className="overflow-x-auto overflow-y-hidden rounded-og-md bg-og-surface-1/70 px-3 py-2.5 font-og-mono text-og-sm leading-5 text-og-fg-muted [scrollbar-gutter:stable] [&>code]:block [&>code]:border-0 [&>code]:bg-transparent [&>code]:p-0 [&>code]:leading-5 [&>code]:text-inherit">
+      <pre
+        tabIndex={0}
+        className="overflow-x-auto overflow-y-hidden rounded-og-md bg-og-surface-1/70 px-3 py-2.5 font-og-mono text-og-sm leading-5 text-og-fg-muted [scrollbar-gutter:stable] [&>code]:block [&>code]:border-0 [&>code]:bg-transparent [&>code]:p-0 [&>code]:leading-5 [&>code]:text-inherit"
+      >
         {children}
       </pre>
     </div>
@@ -268,7 +271,7 @@ function MarkdownTable({ children, className, ...props }: ComponentPropsWithoutR
           />
         </div>
       </div>
-      <div className="overflow-x-auto">
+      <div className="overflow-x-auto" tabIndex={0}>
         <table
           ref={tableRef}
           className={cn("w-full min-w-0 border-collapse text-og-base", className)}

package/src/components/message-timeline.tsx

@@ -22,6 +22,7 @@ import type { ComponentType } from "react";
 import { AnimatePresence, motion } from "motion/react";
 import { Collapsible } from "radix-ui";
 import {
+  Component,
   memo,
   useCallback,
   useEffect,
@@ -1158,21 +1159,34 @@ export function MessageTimeline({
                             : 0;
                       return (
                         <div key={key} data-og-timeline-group-anchor="" data-og-group-key={key}>
-                          <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
-                            }
-                          />
+                          <TimelineGroupRenderBoundary
+                            resetKeys={[
+                              group,
+                              renderMessageText,
+                              onOpenSession,
+                              onMemoryClick,
+                              onReconnect,
+                              resolveProviderLogo,
+                              toolRegistry,
+                              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
+                              }
+                            />
+                          </TimelineGroupRenderBoundary>
                         </div>
                       );
                     })}
@@ -1420,6 +1434,75 @@ function cancelFrame(id: number): void {
   window.clearTimeout(id);
 }
 
+type TimelineGroupRenderBoundaryProps = {
+  children: ReactNode;
+  resetKeys: readonly unknown[];
+};
+
+type TimelineGroupRenderBoundaryState = {
+  failed: boolean;
+  resetKeys: readonly unknown[];
+};
+
+function timelineRenderResetKeysChanged(
+  previous: readonly unknown[],
+  next: readonly unknown[],
+): boolean {
+  return (
+    previous.length !== next.length || previous.some((key, index) => !Object.is(key, next[index]))
+  );
+}
+
+/**
+ * A malformed historical payload or consumer renderer must not take down the
+ * entire conversation. Keep the boundary outside the row component so React
+ * can replace an invalid element type (error #130) with a bounded fallback.
+ */
+class TimelineGroupRenderBoundary extends Component<
+  TimelineGroupRenderBoundaryProps,
+  TimelineGroupRenderBoundaryState
+> {
+  state: TimelineGroupRenderBoundaryState = {
+    failed: false,
+    resetKeys: this.props.resetKeys,
+  };
+
+  static getDerivedStateFromError(): Partial<TimelineGroupRenderBoundaryState> {
+    return { failed: true };
+  }
+
+  static getDerivedStateFromProps(
+    props: TimelineGroupRenderBoundaryProps,
+    state: TimelineGroupRenderBoundaryState,
+  ): Partial<TimelineGroupRenderBoundaryState> | null {
+    if (timelineRenderResetKeysChanged(state.resetKeys, props.resetKeys)) {
+      return { failed: false, resetKeys: props.resetKeys };
+    }
+    return null;
+  }
+
+  render(): ReactNode {
+    if (this.state.failed) {
+      return (
+        <div
+          data-testid="timeline-group-render-error"
+          role="status"
+          className="flex items-start gap-2 rounded-lg border border-og-border bg-og-surface-muted px-3 py-2 text-sm text-og-fg-muted"
+        >
+          <TriangleAlertIcon aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
+          <div>
+            <p className="font-medium text-og-fg">Timeline item unavailable</p>
+            <p>
+              This item could not be displayed. The rest of the conversation is still available.
+            </p>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
 // The full loaded window stays mounted, so settled history rows must be cheap
 // on every commit: projection reuses group objects for unchanged groups, so
 // memo skips them. Live projection creates a new group object, and
@@ -1486,7 +1569,10 @@ const TimelineGroupView = memo(function TimelineGroupView({
   // Latch live→folded so a top-level shell that was already mounted open can
   // start the settle beat without remounting bare rail → wrapper.
   const liveActivitySettle = useLiveSettleFold(activityShouldFold && !insideTurn);
-  const turnDefaultOpen = !insideTurn && group.kind === "turn" && group.outcome === "failed";
+  const turnDefaultOpen =
+    !insideTurn &&
+    group.kind === "turn" &&
+    (group.outcome === "failed" || timelineGroupContainsAuthNeeded(group));
   // activity-* → turn-* remount: carry resting state so settleFold does not
   // re-open a chip the reader already watched collapse.
   if (group.kind === "turn" && foldMemory && !insideTurn) {
@@ -1578,21 +1664,37 @@ const TimelineGroupView = memo(function TimelineGroupView({
       // more "N steps" was the redundant double fold).
       const nestClusters = foldableActivityClusterCount(group.groups) >= 2;
       const turnCopyText = collectTurnCopyText(group.groups, trailingAgentText);
-      const body = group.groups.map((child) => (
-        <TimelineGroupView
-          key={timelineGroupKey(child)}
-          group={child}
-          renderMessageText={renderMessageText}
-          onOpenSession={onOpenSession}
-          onMemoryClick={onMemoryClick}
-          onReconnect={onReconnect}
-          resolveProviderLogo={resolveProviderLogo}
-          toolRegistry={toolRegistry}
-          turnSummary={turnSummary}
-          insideTurn
-          nestClusterChips={nestClusters}
-        />
-      ));
+      const body = group.groups.map((child) => {
+        const key = timelineGroupKey(child);
+        return (
+          <TimelineGroupRenderBoundary
+            key={key}
+            resetKeys={[
+              child,
+              renderMessageText,
+              onOpenSession,
+              onMemoryClick,
+              onReconnect,
+              resolveProviderLogo,
+              toolRegistry,
+              turnSummary,
+            ]}
+          >
+            <TimelineGroupView
+              group={child}
+              renderMessageText={renderMessageText}
+              onOpenSession={onOpenSession}
+              onMemoryClick={onMemoryClick}
+              onReconnect={onReconnect}
+              resolveProviderLogo={resolveProviderLogo}
+              toolRegistry={toolRegistry}
+              turnSummary={turnSummary}
+              insideTurn
+              nestClusterChips={nestClusters}
+            />
+          </TimelineGroupRenderBoundary>
+        );
+      });
       return (
         <TurnSummary
           items={activityItems}
@@ -1679,6 +1781,17 @@ function timelineGroupKey(group: TimelineGroup): string {
   }
 }
 
+function timelineGroupContainsAuthNeeded(group: TimelineGroup): boolean {
+  switch (group.kind) {
+    case "item":
+      return group.item.kind === "auth-needed";
+    case "activity":
+      return false;
+    case "turn":
+      return group.groups.some(timelineGroupContainsAuthNeeded);
+  }
+}
+
 function timelineGroupItemIds(group: TimelineGroup): string[] {
   switch (group.kind) {
     case "item":
@@ -2433,7 +2546,9 @@ function AuthNeededRow({
   const [failed, setFailed] = useState(false);
   const provider = providerLabel(item.providerDomain);
   const unavailable =
-    item.reason === "unsupported_auth" || item.reason === "resource_scope_unavailable";
+    item.reason === "personal_authority_unavailable" ||
+    item.reason === "unsupported_auth" ||
+    item.reason === "resource_scope_unavailable";
   const missing = item.reason === "missing_connection";
   const actionLabel = missing ? "Connect" : "Reconnect";
 
@@ -2587,6 +2702,8 @@ function authReasonLine(reason: AuthNeededItem["reason"]): string {
     case "expired":
     case "refresh_failed":
       return "Its access expired.";
+    case "personal_authority_unavailable":
+      return "This automation was not granted access to your personal connection.";
     case "unsupported_auth":
       return "This connection cannot authenticate the configured tool endpoint.";
     case "resource_scope_unavailable":

package/src/hooks/use-turn-queue.ts

@@ -1,6 +1,7 @@
 import type {
   ComposerDraft,
   EffectiveSessionControl,
+  McpPersonalConnectionSummary,
   SessionEvent,
   SessionQueueMutationResponse,
   SessionQueueSnapshot,
@@ -53,6 +54,8 @@ export type UseTurnQueueResult = {
   pendingInputs: SessionPendingInputPreview[];
   /** Exact pending members projected to join an already-waiting prompt. */
   pendingInputAttachment: SessionQueueSnapshot["pendingInputAttachment"];
+  /** Secret-safe personal MCP summaries frozen on the exact active turn. */
+  activePersonalConnections: McpPersonalConnectionSummary[];
   effectiveControl: EffectiveSessionControl | null;
   /** The latest interrupted attempt has not yet durably proved physical quiescence. */
   stoppingPreviousAttempt: boolean;
@@ -332,6 +335,7 @@ export function useTurnQueue(
     queue: visibleSnapshot?.items ?? [],
     pendingInputs: visibleSnapshot?.pendingInputs ?? [],
     pendingInputAttachment: visibleSnapshot?.pendingInputAttachment ?? null,
+    activePersonalConnections: visibleSnapshot?.activePersonalConnections ?? [],
     effectiveControl: visibleSnapshot?.effectiveControl ?? null,
     stoppingPreviousAttempt: visibleSnapshot?.stoppingPreviousAttempt ?? false,
     loading: identityMatches ? loading : enabled,

package/src/timeline/projection.ts

@@ -1507,6 +1507,7 @@ const AUTH_NEEDED_REASONS: ReadonlySet<string> = new Set([
   "expired",
   "insufficient_scope",
   "refresh_failed",
+  "personal_authority_unavailable",
   "unsupported_auth",
   "resource_scope_unavailable",
 ]);