@opengeni/react 0.15.0 → 0.23.0

package/src/session.ts

@@ -0,0 +1,89 @@
+// @opengeni/react/session — session state and pure timeline projection.
+//
+// This entry deliberately excludes styled components, workbench surfaces, CSS,
+// and their optional peers. Hosts keep OpenGeni's session semantics while
+// rendering their own product UI.
+
+export type {
+  EmbeddedHumanInputSessionClientLike as HumanInputSessionClientLike,
+  EmbeddedSessionMcpApprovalPolicyClientLike as SessionMcpApprovalPolicyClientLike,
+  EmbeddedSessionClientLike as SessionClientLike,
+} from "./client";
+export type {
+  EmbeddedHumanInputClientOverride as HumanInputClientOverride,
+  EmbeddedSessionMcpApprovalPolicyClientOverride as SessionMcpApprovalPolicyClientOverride,
+  EmbeddedSessionClientOverride as ClientOverride,
+} from "./session-context";
+
+export { useSessionEvents } from "./hooks/use-session-events";
+export type {
+  SessionEventsConnectionState,
+  UseSessionEventsOptions,
+  UseSessionEventsResult,
+} from "./hooks/use-session-events";
+export {
+  useComposer,
+  composeSendInput,
+  shouldSteerOnKey,
+  shouldSubmitOnKey,
+  FILE_ONLY_MESSAGE_TEXT,
+} from "./hooks/use-composer";
+export type { ComposerSendExtras, ComposerState, UseComposerOptions } from "./hooks/use-composer";
+export { useTurnQueue, isTurnQueueEvent } from "./hooks/use-turn-queue";
+export type {
+  QueueMutationKind,
+  UseTurnQueueOptions,
+  UseTurnQueueResult,
+} from "./hooks/use-turn-queue";
+export { useSessionControl } from "./hooks/use-session-control";
+export type {
+  UseSessionControlOptions,
+  UseSessionControlResult,
+} from "./hooks/use-session-control";
+export {
+  isSessionMcpApprovalPolicyEvent,
+  useSessionMcpApprovalPolicy,
+} from "./hooks/use-session-mcp-approval-policy";
+export type {
+  UseSessionMcpApprovalPolicyOptions,
+  UseSessionMcpApprovalPolicyResult,
+} from "./hooks/use-session-mcp-approval-policy";
+
+export { approvalsFromRequiresAction, projectPendingApprovals } from "./approvals";
+export type { PendingApproval } from "./approvals";
+
+export { humanInputRequestFromEvent, projectPendingHumanInputRequests } from "./human-input";
+export type { PendingHumanInputRequest } from "./human-input";
+export { isHumanInputEvent, useHumanInputRequests } from "./hooks/use-human-input";
+export type {
+  UseHumanInputRequestsOptions,
+  UseHumanInputRequestsResult,
+} from "./hooks/use-human-input";
+
+export {
+  buildTimeline,
+  creditExhaustedFromEvents,
+  extractSessionRef,
+  groupTimeline,
+  sessionStatusFromEvents,
+  toolDisplayName,
+} from "./timeline/projection";
+export type {
+  ActivityItem,
+  AgentMessageItem,
+  AuthNeededItem,
+  GoalItem,
+  MemoryItem,
+  NoticeItem,
+  ReasoningItem,
+  SandboxItem,
+  SessionStatusItem,
+  TimelineGroup,
+  TimelineItem,
+  TurnOutcome,
+  ToolCallItem,
+  TurnEndItem,
+  UserMessageItem,
+  WorkerCompletionItem,
+  WorkerItem,
+} from "./timeline/types";

package/src/timeline/parsers.ts

@@ -387,6 +387,41 @@ export function screenshotDataUrl(out: unknown): string | null {
   return null;
 }
 
+export type TimelineMediaPreview = {
+  type: "media_preview";
+  mediaType: string;
+  inlineBytes: number | null;
+  fullOutputAvailable: false;
+  preview: string;
+};
+
+/** Find the explicit non-retained inline-media fact in a tool output. */
+export function mediaPreviewFact(out: unknown): TimelineMediaPreview | null {
+  if (typeof out === "string" && (out.startsWith("{") || out.startsWith("["))) {
+    const parsed = tryParseJson(out);
+    if (parsed !== undefined && parsed !== out) return mediaPreviewFact(parsed);
+  }
+  if (Array.isArray(out)) {
+    for (const entry of out) {
+      const preview = mediaPreviewFact(entry);
+      if (preview) return preview;
+    }
+    return null;
+  }
+  if (!out || typeof out !== "object") return null;
+  const record = out as Record<string, unknown>;
+  if (
+    record.type !== "media_preview" ||
+    typeof record.mediaType !== "string" ||
+    record.fullOutputAvailable !== false ||
+    typeof record.preview !== "string" ||
+    (record.inlineBytes !== null && typeof record.inlineBytes !== "number")
+  ) {
+    return null;
+  }
+  return record as TimelineMediaPreview;
+}
+
 /** Serialize whatever a Uint8Array became in JSON (number[], {"0":n,…} index
  *  map, or Buffer-JSON {type:"Buffer",data:[…]}) back into base64. */
 function bytesToBase64(data: unknown): string | null {

package/src/timeline/projection.ts

@@ -393,7 +393,7 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
           tone: "waiting",
           text:
             before && after
-              ? `Context compacted from approximately ${before} to ${after} tokens.`
+              ? `Active conversation history compacted from approximately ${before} to ${after} tokens.`
               : "Context compacted so the turn could continue.",
           occurredAt: event.occurredAt,
         });
@@ -406,13 +406,17 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
         items.push({
           kind: "notice",
           id: event.id,
-          tone: "waiting",
+          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."
-                : "Context compaction was not needed.",
+                : 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.",
           occurredAt: event.occurredAt,
         });
         break;
@@ -432,7 +436,8 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
         break;
       }
 
-      case "tool.auth_needed": {
+      case "tool.auth_needed":
+      case "credential.auth_needed": {
         // Keep the whole structured payload — the renderer turns it into a clean
         // inline reconnect card, and the app starts the recovery flow off the
         // connectionId/resource. Losing it to a plain-text notice was the ugly
@@ -814,6 +819,7 @@ function isTurnExecutionEvidence(type: string): boolean {
     type === "turn.capacity_waiting" ||
     type === "session.requiresAction" ||
     type === "tool.auth_needed" ||
+    type === "credential.auth_needed" ||
     type.startsWith("rig.setup.") ||
     type === "codex.capacity.waiting" ||
     type === "codex.capacity.resumed"
@@ -1193,6 +1199,8 @@ const AUTH_NEEDED_REASONS: ReadonlySet<string> = new Set([
   "expired",
   "insufficient_scope",
   "refresh_failed",
+  "unsupported_auth",
+  "resource_scope_unavailable",
 ]);
 
 function authNeededReason(value: unknown): AuthNeededItem["reason"] {

package/src/timeline/tool-renderers.tsx

@@ -22,6 +22,7 @@ import {
   execTruncated,
   isExecSessionLostBanner,
   looksBinary,
+  mediaPreviewFact,
   parseExecBannerSessionId,
   parseToolArgs,
   redactSecrets,
@@ -555,6 +556,7 @@ function ComputerCallRenderer({ item }: ToolRendererProps) {
   const rejected = raw.providerData?.approvalStatus === "rejected";
   const readOnly = typeof out === "string" && out.includes("read-only");
   const shotUrl = screenshotDataUrl(out);
+  const omittedMedia = mediaPreviewFact(out);
   const empty = out === "" || out == null;
   const batched = actions.length > 1 ? actions.map((a) => computerVerb(a)).join(" · ") : null;
   // Fold the batched-action count into the title (one media affordance per row),
@@ -635,6 +637,26 @@ function ComputerCallRenderer({ item }: ToolRendererProps) {
     );
   }
 
+  if (omittedMedia) {
+    return (
+      <ActivityDisclosure
+        icon={<CameraOffIcon className={ICON_SIZE} />}
+        iconTone={isFailed ? "failed" : "muted"}
+        title={`${verb}${countSuffix} · image omitted · not retained`}
+        failed={isFailed}
+        cancelled={isCancelled}
+        preview="inline image omitted · not retained"
+        media={<MediaEmpty />}
+      >
+        <BodyNote>
+          The inline {omittedMedia.mediaType} output was omitted from the audit timeline and its
+          source bytes were not retained.
+        </BodyNote>
+        {batched ? <BodyNote>batched: {batched}</BodyNote> : null}
+      </ActivityDisclosure>
+    );
+  }
+
   if (empty) {
     return (
       <ActivityDisclosure
@@ -759,6 +781,7 @@ function ViewImageRenderer({ item }: ToolRendererProps) {
   const path = typeof args.path === "string" ? args.path : "";
   const out = item.output;
   const text = typeof out === "string" ? out : "";
+  const omittedMedia = mediaPreviewFact(out);
 
   if (item.status === "running") {
     return (
@@ -807,6 +830,24 @@ function ViewImageRenderer({ item }: ToolRendererProps) {
       </ActivityDisclosure>
     );
   }
+  if (omittedMedia) {
+    return (
+      <ActivityDisclosure
+        icon={<ImageIcon className={ICON_SIZE} />}
+        iconTone={viewFailed ? "failed" : "muted"}
+        title={`Viewed ${basename(path)} · image omitted · not retained`}
+        failed={viewFailed}
+        cancelled={viewCancelled}
+        preview="inline image omitted · not retained"
+        media={<MediaEmpty />}
+      >
+        <BodyNote>
+          The inline {omittedMedia.mediaType} output was omitted from the audit timeline and its
+          source bytes were not retained.
+        </BodyNote>
+      </ActivityDisclosure>
+    );
+  }
   if (text.includes("No image data")) {
     return (
       <ActivityDisclosure

package/src/timeline/turn-summary.tsx

@@ -4,7 +4,7 @@ import { Collapsible } from "radix-ui";
 import { cn } from "../lib/cn";
 import { useForcedDefaultOpen } from "./disclosure-context";
 import { useEntranceAnimation } from "./entrance";
-import { applyPatchOps, isApplyPatch, screenshotDataUrl } from "./parsers";
+import { applyPatchOps, isApplyPatch, mediaPreviewFact, screenshotDataUrl } from "./parsers";
 import { rawTypeOf } from "./registry";
 import type { ActivityItem, TurnOutcome } from "./types";
 export type { TurnOutcome } from "./types";
@@ -181,7 +181,7 @@ function summarizeTurn(items: ActivityItem[], durationMs?: number): string {
       item.name === "computer_call" ||
       item.name === "computer_screenshot"
     ) {
-      if (screenshotDataUrl(item.output) !== null) {
+      if (screenshotDataUrl(item.output) !== null || mediaPreviewFact(item.output) !== null) {
         screenshots += 1;
       }
     }

package/src/timeline/types.ts

@@ -1,4 +1,4 @@
-import type { ResourceRef, SessionStatus, ToolRef } from "@opengeni/sdk";
+import type { ResourceRef, SessionStatus, ToolAuthNeededPayload, ToolRef } from "@opengeni/sdk";
 
 /* ----------------------------------------------------------------------------
    Timeline item types
@@ -167,13 +167,14 @@ export type NoticeItem = {
 };
 
 /**
- * A tool call hit a connection whose credential lapsed — the broker asked the
- * user to reconnect the provider before the turn can continue. Carries the
- * structured `tool.auth_needed` payload so the renderer can draw a clean inline
- * reconnect affordance (provider logo + one human line + a Reconnect button)
- * and the app can start the right recovery flow (OAuth reconnect for the
- * surviving connection, or credential re-entry for an api-key one). The `reason`
- * shapes the human copy but is never shown raw.
+ * A tool call hit a missing or lapsed connection. The broker reports that
+ * condition as a tool error and the turn continues; reconnecting never resumes
+ * or replays the original call. Carries the structured `tool.auth_needed`
+ * payload so the renderer can draw a clean inline recovery affordance (provider
+ * logo + one human line + a Connect/Reconnect button) and the app can start the
+ * right flow (OAuth reconnect for the surviving connection, or credential
+ * re-entry for an api-key one). The `reason` shapes the human copy but is never
+ * shown raw.
  */
 export type AuthNeededItem = {
   kind: "auth-needed";
@@ -183,7 +184,7 @@ export type AuthNeededItem = {
   providerDomain: string;
   /** The lapsed connection to reconnect, when the row survived. */
   connectionId: string | null;
-  reason: "missing_connection" | "expired" | "insufficient_scope" | "refresh_failed" | null;
+  reason: ToolAuthNeededPayload["reason"] | null;
   /** Scopes the provider now needs; may inform the copy, never shown as a raw label. */
   scopes: string[];
   /** The OAuth `resource` (RFC 8707) the reconnect should target, when supplied. */

package/styles/index.css

@@ -216,6 +216,17 @@
   scrollbar-color: var(--og-color-border-strong) transparent;
 }
 
+/* The machine popover stays mounted so its trigger's `aria-controls` always
+   resolves. Keep Radix's positioning wrapper measurable while closed, but
+   remove the entire fixed layer from painting, hit testing, and the a11y tree.
+   Hiding only the content leaves the wrapper able to intercept pointer input. */
+[data-radix-popper-content-wrapper]:has(
+  > [data-machine-state-popover][data-state="closed"]
+) {
+  visibility: hidden;
+  pointer-events: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .og-root *,
   .og-root *::before,
@@ -228,6 +239,51 @@
   }
 }
 
+@media (forced-colors: active) {
+  /* Forced-colors can replace a painted background with Canvas while custom
+     properties retain their authored dark/light values. That combination is
+     dangerous: descendants may resolve a pale dark-theme foreground against a
+     light system canvas. Collapse the whole component palette onto guaranteed
+     system colors. Meaning in status/diff UI is also carried by text, icons,
+     and +/- markers, so it never depends on these colors alone. */
+  .og-root {
+    --og-color-bg: Canvas;
+    --og-color-surface-1: Canvas;
+    --og-color-surface-2: Canvas;
+    --og-color-surface-3: Canvas;
+    --og-color-border: CanvasText;
+    --og-color-border-strong: CanvasText;
+    --og-color-fg: CanvasText;
+    --og-color-fg-muted: CanvasText;
+    --og-color-fg-subtle: CanvasText;
+    --og-color-accent: CanvasText;
+    --og-color-accent-strong: CanvasText;
+    --og-color-accent-deep: CanvasText;
+    --og-color-accent-fg: CanvasText;
+    --og-color-accent-soft: Canvas;
+    --og-color-status-queued: CanvasText;
+    --og-color-status-running: CanvasText;
+    --og-color-status-idle: CanvasText;
+    --og-color-status-waiting: CanvasText;
+    --og-color-status-failed: CanvasText;
+    --og-color-status-cancelled: CanvasText;
+    --og-color-danger: CanvasText;
+    --og-color-diff-add-bg: Canvas;
+    --og-color-diff-del-bg: Canvas;
+    --og-shadow-sm: none;
+    --og-shadow-md: none;
+    --og-shadow-lg: none;
+    --og-shadow-glow: none;
+  }
+
+  /* Selected fills are flattened by the OS palette. Preserve a visible,
+     non-color-only tab selection affordance in every high-contrast theme. */
+  .og-root [role="tab"][aria-selected="true"] {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}
+
 /* ----------------------------------------------------------------------------
    xterm.js hardening (SandboxTerminal)
 

package/styles/index.d.ts

@@ -0,0 +1,2 @@
+declare const stylesheet: string;
+export default stylesheet;

package/styles/tokens.css

@@ -14,8 +14,8 @@
 
 :root {
   /* Typography ------------------------------------------------------------- */
-  --og-font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
-  --og-font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --og-font-sans: "Inter Variable", "Inter", "Noto Sans JP Variable", "Noto Sans Arabic Variable", ui-sans-serif, system-ui, sans-serif;
+  --og-font-mono: "JetBrains Mono Variable", "JetBrains Mono", "Noto Sans JP Variable", "Noto Sans Arabic Variable", ui-monospace, SFMono-Regular, Menlo, monospace;
   --og-font-features: "cv11", "ss01", "ss03";
   --og-code-font-size: 12px;
   --og-code-line-height: 18px;
@@ -50,7 +50,9 @@
   /* Accent — one brand hue, used sparingly ----------------------------------- */
   --og-color-accent: oklch(0.72 0.15 255);
   --og-color-accent-strong: oklch(0.78 0.14 255);
-  --og-color-accent-deep: oklch(0.62 0.18 255);
+  /* Primary actions render ordinary 14 px accent-foreground text on this
+     token. Keep the blue dark enough to preserve WCAG AA contrast. */
+  --og-color-accent-deep: oklch(0.54 0.18 255);
   --og-color-accent-fg: oklch(0.985 0.005 260);
   --og-color-accent-soft: color-mix(in oklch, var(--og-color-accent) 16%, transparent);
 
@@ -101,10 +103,13 @@
   --og-color-accent-soft: color-mix(in oklch, var(--og-color-accent) 11%, transparent);
 
   --og-color-status-queued: oklch(0.55 0.03 260);
-  --og-color-status-running: oklch(0.6 0.13 80);
-  --og-color-status-idle: oklch(0.56 0.13 155);
+  /* Status letters are ordinary 11 px text, including over selected rows. */
+  --og-color-status-running: oklch(0.48 0.13 80);
+  /* Used as 11–12 px diff/status text, including on the pale addition tint.
+     Keep enough headroom above 4.5:1 on both Surface 1 and the tinted row. */
+  --og-color-status-idle: oklch(0.49 0.13 155);
   --og-color-status-waiting: oklch(0.54 0.15 305);
-  --og-color-status-failed: oklch(0.55 0.19 22);
+  --og-color-status-failed: oklch(0.5 0.19 22);
   --og-color-status-cancelled: oklch(0.55 0.025 260);
   --og-color-danger: oklch(0.55 0.2 22);
   --og-color-diff-add-bg: color-mix(in oklch, var(--og-color-status-idle) 12%, transparent);

package/styles/tokens.d.ts

@@ -0,0 +1,2 @@
+declare const stylesheet: string;
+export default stylesheet;