@opengeni/react 0.13.0 → 0.20.0

package/src/session-context.ts

@@ -0,0 +1,135 @@
+import type { StreamConnectionState, WorkspaceControlEvent } from "@opengeni/sdk";
+import { createContext, useContext } from "react";
+import type {
+  EmbeddedHumanInputSessionClientLike,
+  EmbeddedSessionClientLike,
+  SessionClientLike,
+} from "./client";
+
+export type OpenGeniContextValue = {
+  client: SessionClientLike;
+  workspaceId: string;
+  workspaceControlEvent: WorkspaceControlEvent | null;
+  workspaceControlConnectionState: StreamConnectionState | "idle" | "error";
+  registerSessionReconciler: (
+    sessionId: string,
+    key: string,
+    reconcile: () => Promise<void>,
+  ) => () => void;
+  reconcileSession: (sessionId: string) => Promise<void>;
+};
+
+export const OpenGeniContext = createContext<OpenGeniContextValue | null>(null);
+
+const NOOP_REGISTER_RECONCILER: OpenGeniContextValue["registerSessionReconciler"] = () => () =>
+  undefined;
+const NOOP_RECONCILE_SESSION: OpenGeniContextValue["reconcileSession"] = async () => undefined;
+
+export type ClientOverride = {
+  client?: SessionClientLike | undefined;
+  workspaceId?: string | undefined;
+};
+
+export type EmbeddedSessionClientOverride = {
+  client?: EmbeddedSessionClientLike | undefined;
+  workspaceId?: string | undefined;
+};
+
+export type EmbeddedHumanInputClientOverride = {
+  client?: EmbeddedHumanInputSessionClientLike | undefined;
+  workspaceId?: string | undefined;
+};
+
+export type EmbeddedSessionContextValue = Omit<OpenGeniContextValue, "client"> & {
+  client: EmbeddedSessionClientLike;
+};
+
+/** Resolve client + workspace from explicit overrides or the provider. */
+export function useOpenGeni(override: ClientOverride = {}): OpenGeniContextValue {
+  const context = useContext(OpenGeniContext);
+  const client = override.client ?? context?.client;
+  const workspaceId = override.workspaceId ?? context?.workspaceId;
+  if (!client || !workspaceId) {
+    throw new Error(
+      "@opengeni/react: no OpenGeni client/workspace available. Wrap the tree in <OpenGeniProvider> or pass { client, workspaceId } to the hook.",
+    );
+  }
+  return {
+    client,
+    workspaceId,
+    workspaceControlEvent: context?.workspaceControlEvent ?? null,
+    workspaceControlConnectionState: context?.workspaceControlConnectionState ?? "idle",
+    registerSessionReconciler: context?.registerSessionReconciler ?? NOOP_REGISTER_RECONCILER,
+    reconcileSession: context?.reconcileSession ?? NOOP_RECONCILE_SESSION,
+  };
+}
+
+/**
+ * Resolve the narrow client required by the session-only hooks. The full
+ * provider client is structurally compatible, while an explicit host proxy
+ * only needs to expose session/event/composer/queue/control operations.
+ */
+export function useEmbeddedSession(
+  override: EmbeddedSessionClientOverride = {},
+): EmbeddedSessionContextValue {
+  const context = useContext(OpenGeniContext);
+  const client = override.client ?? context?.client;
+  const workspaceId = override.workspaceId ?? context?.workspaceId;
+  if (!client || !workspaceId) {
+    throw new Error(
+      "@opengeni/react: no OpenGeni client/workspace available. Wrap the tree in <OpenGeniProvider> or pass { client, workspaceId } to the hook.",
+    );
+  }
+  return {
+    client,
+    workspaceId,
+    workspaceControlEvent: context?.workspaceControlEvent ?? null,
+    workspaceControlConnectionState: context?.workspaceControlConnectionState ?? "idle",
+    registerSessionReconciler: context?.registerSessionReconciler ?? NOOP_REGISTER_RECONCILER,
+    reconcileSession: context?.reconcileSession ?? NOOP_RECONCILE_SESSION,
+  };
+}
+
+/**
+ * Resolve the structured-input refinement without widening the baseline
+ * session-only proxy contract.
+ */
+export function useEmbeddedHumanInputSession(override: EmbeddedHumanInputClientOverride = {}): Omit<
+  EmbeddedSessionContextValue,
+  "client"
+> & {
+  client: EmbeddedHumanInputSessionClientLike;
+} {
+  const embedded = useEmbeddedSession(override);
+  const client = embedded.client as Partial<EmbeddedHumanInputSessionClientLike>;
+  if (
+    typeof client.listHumanInputRequests !== "function" ||
+    typeof client.getHumanInputRequest !== "function" ||
+    typeof client.submitHumanInputResponse !== "function"
+  ) {
+    throw new Error(
+      "@opengeni/react: useHumanInputRequests requires listHumanInputRequests, getHumanInputRequest, and submitHumanInputResponse.",
+    );
+  }
+  return {
+    ...embedded,
+    client: client as EmbeddedHumanInputSessionClientLike,
+  };
+}
+
+/**
+ * Resolve the client only — for hooks that are not workspace-scoped
+ * (`useWorkspaces`, `useBillingUsage`).
+ */
+export function useOpenGeniClient(
+  override: Pick<ClientOverride, "client"> = {},
+): SessionClientLike {
+  const context = useContext(OpenGeniContext);
+  const client = override.client ?? context?.client;
+  if (!client) {
+    throw new Error(
+      "@opengeni/react: no OpenGeni client available. Wrap the tree in <OpenGeniProvider> or pass { client } to the hook.",
+    );
+  }
+  return client;
+}

package/src/session.ts

@@ -0,0 +1,79 @@
+// @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,
+  EmbeddedSessionClientLike as SessionClientLike,
+} from "./client";
+export type {
+  EmbeddedHumanInputClientOverride as HumanInputClientOverride,
+  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 { 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

@@ -148,17 +148,34 @@ export function v4aToGitFileDiff(op: ApplyPatchOperation): GitFileDiff {
           // `@@ -0,0 +1,N @@` from the range fields once newLines is counted — a
           // pre-baked partial header (e.g. `@@ +1 @@`) renders zero lines in a
           // generic unified-diff parser.
-          cur = { oldStart: 0, oldLines: 0, newStart: 1, newLines: 0, header: "", lines: [] };
+          cur = {
+            oldStart: 0,
+            oldLines: 0,
+            newStart: 1,
+            newLines: 0,
+            header: "",
+            lines: [],
+          };
           hunks.push(cur);
           oldNo = 0;
           newNo = 1;
         }
         if (raw.startsWith("+")) {
-          cur.lines.push({ type: "add", oldNo: null, newNo: newNo++, text: raw.slice(1) });
+          cur.lines.push({
+            type: "add",
+            oldNo: null,
+            newNo: newNo++,
+            text: raw.slice(1),
+          });
           cur.newLines += 1;
           additions += 1;
         } else if (raw.startsWith("-")) {
-          cur.lines.push({ type: "del", oldNo: oldNo++, newNo: null, text: raw.slice(1) });
+          cur.lines.push({
+            type: "del",
+            oldNo: oldNo++,
+            newNo: null,
+            text: raw.slice(1),
+          });
           cur.oldLines += 1;
           deletions += 1;
         } else {
@@ -200,7 +217,10 @@ export function v4aToGitFileDiff(op: ApplyPatchOperation): GitFileDiff {
  * renderer and the turn-summary facet counter never drift.
  */
 export function applyPatchOps(raw: unknown): ApplyPatchOperation[] {
-  const r = (raw ?? {}) as { operation?: ApplyPatchOperation; operations?: ApplyPatchOperation[] };
+  const r = (raw ?? {}) as {
+    operation?: ApplyPatchOperation;
+    operations?: ApplyPatchOperation[];
+  };
   if (Array.isArray(r.operations)) {
     return r.operations;
   }
@@ -264,7 +284,21 @@ export function tailPeek(text: string): string {
  * into a flat `{ text, isError }`. Non-MCP outputs pass through as their string
  * form.
  */
-export function unwrapMcpOutput(output: unknown): { text: string; isError: boolean } {
+export function unwrapMcpOutput(output: unknown): {
+  text: string;
+  isError: boolean;
+} {
+  // Managed MCP events persist a normalized single text part as
+  // `{ type: "text", text }`; accept it alongside the SDK-native content array.
+  if (
+    output &&
+    typeof output === "object" &&
+    (output as { type?: unknown }).type === "text" &&
+    typeof (output as { text?: unknown }).text === "string"
+  ) {
+    const record = output as { text: string; isError?: unknown };
+    return { text: record.text, isError: Boolean(record.isError) };
+  }
   if (output && typeof output === "object" && "content" in output) {
     const record = output as { content?: unknown; isError?: unknown };
     const isError = Boolean(record.isError);
@@ -273,7 +307,10 @@ export function unwrapMcpOutput(output: unknown): { text: string; isError: boole
         (part): part is { type: string; text: string } =>
           !!part && typeof part === "object" && (part as { type?: unknown }).type === "text",
       );
-      return { text: textPart ? String(textPart.text) : JSON.stringify(output), isError };
+      return {
+        text: textPart ? String(textPart.text) : JSON.stringify(output),
+        isError,
+      };
     }
     return { text: JSON.stringify(output), isError };
   }
@@ -350,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
@@ -708,13 +713,13 @@ function prescanTurnAnchors(events: SessionEvent[]): TurnAnchorPrescan {
       cancelledTurnIds.add(turnId);
     }
 
-    if (turnId && event.type !== "turn.queued" && event.type !== "turn.cancelled") {
+    if (turnId && isTurnExecutionEvidence(event.type)) {
       const previous = fallbackSeqByTurn.get(turnId);
       if (previous === undefined || event.sequence < previous) {
         fallbackSeqByTurn.set(turnId, event.sequence);
       }
     }
-    if (turnId && isAgentActivityEvent(event.type)) {
+    if (turnId && isTurnExecutionEvidence(event.type)) {
       startedTurnIds.add(turnId);
     }
   }
@@ -798,6 +803,29 @@ function isAgentActivityEvent(type: string): boolean {
   return type.startsWith("agent.") || type.startsWith("sandbox.");
 }
 
+/**
+ * Evidence that a queued prompt crossed the execution boundary when an older
+ * or partially recovered ledger is missing its canonical `turn.started`.
+ * Queue/control bookkeeping intentionally does not qualify: moving, editing,
+ * steering, or deleting a waiting row must never make its prompt appear in the
+ * transcript as though inference had begun.
+ */
+function isTurnExecutionEvidence(type: string): boolean {
+  return (
+    isAgentActivityEvent(type) ||
+    type === "turn.completed" ||
+    type === "turn.failed" ||
+    type === "turn.recovery.requested" ||
+    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"
+  );
+}
+
 function turnEndItem(
   event: SessionEvent,
   outcome: TurnEndItem["outcome"],
@@ -1171,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

@@ -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 connection that needs action or cannot satisfy the selected
+ * endpoint/resource contract. Carries the
+ * structured `tool.auth_needed` or `credential.auth_needed` payload so the renderer can draw a clean inline
+ * reconnect affordance when recovery is possible, or a calm unavailable state
+ * for incompatible auth/resource containment. 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.
  */
 export type AuthNeededItem = {
   kind: "auth-needed";
@@ -183,7 +184,14 @@ 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:
+    | "missing_connection"
+    | "expired"
+    | "insufficient_scope"
+    | "refresh_failed"
+    | "unsupported_auth"
+    | "resource_scope_unavailable"
+    | 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

@@ -165,6 +165,28 @@
   }
 }
 
+/* Metric-history line draw-in. The chart path carries `pathLength={1}`, so the
+   dash math is resolution-independent: one full-length dash whose offset animates
+   from 1 (hidden) to 0 (drawn). Degrades to a solid line if animations are off. */
+@keyframes og-mh-draw {
+  from {
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+.og-mh-draw {
+  stroke-dasharray: 1;
+  animation: og-mh-draw 900ms var(--og-ease-out) forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .og-mh-draw {
+    animation: none;
+    stroke-dasharray: none;
+  }
+}
+
 /* Shimmer helper: gradient text the keyframe scrolls through. */
 .og-shimmer-text {
   background: linear-gradient(
@@ -194,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,
@@ -206,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;