@opengeni/react 0.29.0 → 0.32.1

package/src/model-policy.ts

@@ -0,0 +1,210 @@
+import type { ClientModel, ReasoningEffort, WorkspaceModelCatalogModel } from "@opengeni/sdk";
+
+export type PickerBillingClass = "opengeni_credits" | "codex_subscription" | "byok";
+
+export type PickerModelRow = {
+  id: string;
+  label: string;
+  billingClass: PickerBillingClass;
+  billingClassLabel: string;
+  selectable: boolean;
+  unavailableReason: string | null;
+  provider: string;
+  providerLabel: string;
+  catalog: WorkspaceModelCatalogModel;
+};
+
+export type LatencyModeId = "standard" | "priority" | "fast";
+
+const BILLING_CLASS_ORDER: PickerBillingClass[] = [
+  "opengeni_credits",
+  "codex_subscription",
+  "byok",
+];
+
+const BILLING_CLASS_LABELS: Record<PickerBillingClass, string> = {
+  opengeni_credits: "OpenGeni",
+  codex_subscription: "Codex",
+  byok: "Bring your own key",
+};
+
+const AVAILABILITY_REASON_LABELS: Record<string, string> = {
+  missing_credential: "Credentials required",
+  needs_reauth: "Reconnect required",
+  credential_not_ready: "Credential not ready",
+  not_entitled: "Not entitled",
+  provider_unhealthy: "Provider unavailable",
+  policy_blocked: "Blocked by workspace policy",
+  unsupported: "Unsupported",
+};
+
+export function billingClassForModel(model: ClientModel): PickerBillingClass {
+  if (model.credentialSource?.kind === "connected_subscription") {
+    return "codex_subscription";
+  }
+  if (model.credentialSource?.kind === "workspace_connection") {
+    return "byok";
+  }
+  if (model.billing?.upstreamPayer === "connected_subscription") {
+    return "codex_subscription";
+  }
+  if (model.billing?.upstreamPayer === "workspace") {
+    return "byok";
+  }
+  return "opengeni_credits";
+}
+
+export function billingClassLabel(billingClass: PickerBillingClass): string {
+  return BILLING_CLASS_LABELS[billingClass];
+}
+
+export function availabilityReasonLabel(
+  reason: WorkspaceModelCatalogModel["availability"]["reason"],
+): string | null {
+  if (!reason) {
+    return null;
+  }
+  return AVAILABILITY_REASON_LABELS[reason] ?? "Unavailable";
+}
+
+export function effortOptionsForModel(model: ClientModel): ReasoningEffort[] {
+  const efforts = model.capabilities?.reasoning.efforts;
+  if (!efforts || efforts.length === 0) {
+    return ["low"];
+  }
+  const order: ReasoningEffort[] = ["none", "minimal", "low", "medium", "high", "xhigh"];
+  return order.filter((effort) => efforts.includes(effort));
+}
+
+export function defaultEffortForModel(model: ClientModel): ReasoningEffort {
+  const options = effortOptionsForModel(model);
+  const configured = model.capabilities?.reasoning.defaultEffort;
+  if (configured && options.includes(configured)) {
+    return configured;
+  }
+  return options[0] ?? "low";
+}
+
+export function coerceReasoningEffortForModel(
+  model: ClientModel,
+  effort: ReasoningEffort,
+): ReasoningEffort {
+  const options = effortOptionsForModel(model);
+  if (options.includes(effort)) {
+    return effort;
+  }
+  return defaultEffortForModel(model);
+}
+
+export function runnableLatencyModesForModel(model: ClientModel): LatencyModeId[] {
+  const modes = model.capabilities?.latencyModes ?? [];
+  return modes.filter((mode) => mode.runnable).map((mode) => mode.id);
+}
+
+export function labelLatencyMode(mode: LatencyModeId): string {
+  if (mode === "fast") {
+    return "Fast";
+  }
+  if (mode === "priority") {
+    return "Priority";
+  }
+  return "Standard";
+}
+
+export function payerSummaryForModel(model: ClientModel): string {
+  const billing = model.billing;
+  if (!billing) {
+    return "Route unknown";
+  }
+  if (billing.metering === "opengeni_credits") {
+    return "OpenGeni credits · automatic managed route";
+  }
+  if (billing.upstreamPayer === "connected_subscription") {
+    return "Codex subscription · external billing";
+  }
+  if (billing.upstreamPayer === "workspace") {
+    return "Workspace credentials · external billing";
+  }
+  return "Deployment route · external billing";
+}
+
+export function advancedSourceSummary(model: ClientModel): string | null {
+  const source = model.credentialSource;
+  if (!source) {
+    return null;
+  }
+  if (source.kind === "connected_subscription") {
+    return "Connected Codex subscription";
+  }
+  if (source.kind === "workspace_connection") {
+    return "Workspace API key connection";
+  }
+  if (source.kind === "deployment") {
+    return source.mechanism === "azure_ad_bearer"
+      ? "Deployment Azure identity"
+      : "Deployment API key";
+  }
+  return null;
+}
+
+export function projectPickerRows(models: WorkspaceModelCatalogModel[]): PickerModelRow[] {
+  return models.map((catalog) => {
+    const billingClass = billingClassForModel(catalog);
+    return {
+      id: catalog.id,
+      label: catalog.label,
+      billingClass,
+      billingClassLabel: billingClassLabel(billingClass),
+      selectable: catalog.availability.selectable,
+      unavailableReason: catalog.availability.selectable
+        ? null
+        : availabilityReasonLabel(catalog.availability.reason),
+      provider: catalog.provider,
+      providerLabel: catalog.providerLabel,
+      catalog,
+    };
+  });
+}
+
+export function sortPickerRows(rows: PickerModelRow[]): PickerModelRow[] {
+  return [...rows].sort((left, right) => {
+    const classDelta =
+      BILLING_CLASS_ORDER.indexOf(left.billingClass) -
+      BILLING_CLASS_ORDER.indexOf(right.billingClass);
+    if (classDelta !== 0) {
+      return classDelta;
+    }
+    if (left.selectable !== right.selectable) {
+      return left.selectable ? -1 : 1;
+    }
+    return left.label.localeCompare(right.label);
+  });
+}
+
+export function findPickerRow(rows: PickerModelRow[], modelId: string): PickerModelRow | null {
+  return rows.find((row) => row.id === modelId) ?? null;
+}
+
+export function groupPickerRowsByBillingClass(
+  rows: PickerModelRow[],
+): Array<{ billingClass: PickerBillingClass; label: string; rows: PickerModelRow[] }> {
+  const sorted = sortPickerRows(rows);
+  const groups: Array<{
+    billingClass: PickerBillingClass;
+    label: string;
+    rows: PickerModelRow[];
+  }> = [];
+  for (const row of sorted) {
+    const existing = groups.find((group) => group.billingClass === row.billingClass);
+    if (existing) {
+      existing.rows.push(row);
+      continue;
+    }
+    groups.push({
+      billingClass: row.billingClass,
+      label: row.billingClassLabel,
+      rows: [row],
+    });
+  }
+  return groups;
+}

package/src/session-ui.ts

@@ -20,3 +20,10 @@ export type {
 } from "./timeline/turn-summary";
 export { QueueSurface } from "./components/queue-surface";
 export type { QueueSurfaceProps } from "./components/queue-surface";
+export { SessionChrome, sessionChromeGoalPillState } from "./components/session-chrome";
+export type {
+  SessionChromeAgentsSignal,
+  SessionChromeProps,
+  SessionChromeSignalId,
+  SessionChromeSignalTone,
+} from "./components/session-chrome";

package/src/timeline/activity-rail.tsx

@@ -5,13 +5,15 @@ import {
   BrainIcon,
   SquareTerminalIcon,
 } from "lucide-react";
-import { lazy, Suspense } from "react";
+import { lazy, Suspense, useLayoutEffect, useRef } from "react";
 import { jsx as rowJsx, jsxs as rowJsxs } from "react/jsx-runtime";
+import { Markdown } from "../components/markdown";
 import { cn } from "../lib/cn";
 import { truncate } from "../lib/format";
 import { defaultToolRegistry } from "./tool-renderers";
-import { useEntranceAnimation } from "./entrance";
+import { useEntranceAnimation, useEntranceAnimationLive } from "./entrance";
 import type { ToolRegistry } from "./registry";
+import { useSeenActivityIds } from "./seen-activity-ids";
 import { BodyNote, PayloadBlock, ActivityDisclosure } from "./shared";
 import { toolDisplayName } from "./tool-display-name";
 import type { ActivityItem, MemoryItem, ReasoningItem, SandboxItem, WorkerItem } from "./types";
@@ -66,7 +68,34 @@ export function ActivityRail({
   bare,
   className,
 }: ActivityRailProps) {
-  const enter = useEntranceAnimation();
+  const enterMounted = useEntranceAnimation();
+  // Live gate: rails born during bulk capture enter=false forever; with a
+  // seen-id map we still want later live appends to fade (ids gate remounts).
+  const enterLive = useEntranceAnimationLive();
+  const seenIds = useSeenActivityIds();
+  const enter = seenIds ? enterLive : enterMounted;
+  const previousIdsRef = useRef<Set<string> | null>(null);
+  const enteringIds = new Set<string>();
+  if (enter) {
+    for (const item of items) {
+      if (seenIds) {
+        if (!seenIds.has(item.id)) {
+          enteringIds.add(item.id);
+        }
+      } else if (previousIdsRef.current !== null && !previousIdsRef.current.has(item.id)) {
+        // Standalone ActivityRail (tests / demo): append-only, no remount map.
+        enteringIds.add(item.id);
+      }
+    }
+  }
+  useLayoutEffect(() => {
+    previousIdsRef.current = new Set(items.map((item) => item.id));
+    if (seenIds) {
+      for (const item of items) {
+        seenIds.add(item.id);
+      }
+    }
+  });
   return (
     <div
       className={cn(
@@ -75,7 +104,9 @@ export function ActivityRail({
         // so a long rail reads as a few clusters, not a metronome of rows.
         "flex flex-col gap-0.5",
         !bare && "border-l-2 border-og-border pl-3 sm:pl-4",
-        !bare && enter && "animate-og-enter",
+        // Whole-rail enter: standalone rails only (no seen-id map). Inside
+        // MessageTimeline, unknown ids take per-row enter — remounts stay quiet.
+        !bare && enter && !seenIds && previousIdsRef.current === null && "animate-og-enter",
         className,
       )}
     >
@@ -83,7 +114,11 @@ export function ActivityRail({
         const newFamily = index > 0 && familyOf(item) !== familyOf(items[index - 1]!);
         const row = renderActivity(item, toolRegistry, onOpenSession, onMemoryClick);
         return (
-          <div key={item.id} data-og-timeline-row-anchor="" className={cn(newFamily && "mt-3")}>
+          <div
+            key={item.id}
+            data-og-timeline-row-anchor=""
+            className={cn(newFamily && "mt-3", enteringIds.has(item.id) && "animate-og-row-enter")}
+          >
             {row}
           </div>
         );
@@ -135,7 +170,9 @@ function renderActivity(
 
 function ReasoningRow({ item }: { item: ReasoningItem }) {
   // Reasoning recedes: a dimmer, lighter-weight title so action rows lead and
-  // thought rows sit a half-step back in the hierarchy.
+  // thought rows sit a half-step back in the hierarchy. Body uses the same
+  // GFM markdown path as agent messages — Codex reasoning often carries
+  // headings/lists/bold that were previously shown as raw plaintext.
   return (
     <ActivityDisclosure
       icon={<BrainIcon className="size-3.5" />}
@@ -150,7 +187,9 @@ function ReasoningRow({ item }: { item: ReasoningItem }) {
       running={item.streaming}
       preview={truncate(item.text, 110)}
     >
-      <p className="whitespace-pre-wrap text-og-base leading-6 text-og-fg-muted">{item.text}</p>
+      <div className="text-og-base leading-6 text-og-fg-muted [&_strong]:text-og-fg-muted">
+        <Markdown streaming={item.streaming}>{item.text}</Markdown>
+      </div>
     </ActivityDisclosure>
   );
 }

package/src/timeline/entrance.tsx

@@ -18,6 +18,16 @@ const EntranceAnimationContext = createContext(true);
 
 export const EntranceAnimationProvider = EntranceAnimationContext.Provider;
 
+/**
+ * Live entrance gate from the nearest provider. Prefer
+ * {@link useEntranceAnimation} for elements that must freeze the decision at
+ * mount; use this when a stable parent (e.g. ActivityRail) needs to animate
+ * later appends after a bulk window clears.
+ */
+export function useEntranceAnimationLive(): boolean {
+  return useContext(EntranceAnimationContext);
+}
+
 /**
  * Whether this element should wear the entrance animation. Captured at mount
  * from the nearest provider (true outside any provider) and stable for the

package/src/timeline/fold-memory.ts

@@ -0,0 +1,52 @@
+import { createContext, useContext } from "react";
+
+/* ----------------------------------------------------------------------------
+   Fold memory
+
+   Remembers, per durable timeline group id, that a fold reached a RESTING
+   state: "closed" when the settle choreography finished its collapse or the
+   reader closed the chip by hand, "open" when the reader explicitly expanded
+   it. The map lives OUTSIDE the component tree because the timeline
+   deliberately remounts chips with fresh keys (the activity→turn wrap, the
+   nested-chip key flip around settle chrome) — and a remount must never
+   forget that the reader already watched this cluster fold. Re-opening an
+   already-settled fold reads as the timeline undoing its own choreography.
+
+   With no provider the hook returns null and every fold keeps its
+   author-chosen default — standalone TurnSummary usage is unchanged.
+   -------------------------------------------------------------------------- */
+
+export type FoldRestingState = "open" | "closed";
+
+const FoldMemoryContext = createContext<Map<string, FoldRestingState> | null>(null);
+
+/** Provide a per-timeline resting-state map (MessageTimeline owns one). */
+export const FoldMemoryProvider = FoldMemoryContext.Provider;
+
+/** The ancestor fold-memory map, or null when none is mounted (inert). */
+export function useFoldMemory(): Map<string, FoldRestingState> | null {
+  return useContext(FoldMemoryContext);
+}
+
+/**
+ * Single-cluster activity→turn wrap: copy the activity resting state onto the
+ * new turn-* key. Those ids differ across the wrap; without this the turn
+ * remounts settleFold and re-opens a chip the reader already watched collapse.
+ *
+ * Multi-cluster wraps deliberately do NOT inherit — the outer turn chip is new
+ * and still takes one settle beat; nested clusters keep their own activity-*
+ * memory so they stay closed under that beat.
+ */
+export function inheritFoldRestingState(
+  memory: Map<string, FoldRestingState>,
+  targetKey: string,
+  sourceKeys: readonly string[],
+): void {
+  if (memory.has(targetKey) || sourceKeys.length !== 1) {
+    return;
+  }
+  const state = memory.get(sourceKeys[0]!);
+  if (state !== undefined) {
+    memory.set(targetKey, state);
+  }
+}

package/src/timeline/index.ts

@@ -30,6 +30,7 @@ export type {
   ActivityItem,
   AgentMessageItem,
   AuthNeededItem,
+  ContextCompactionItem,
   FleetDecisionItem,
   FleetDecisionScoreItem,
   GoalItem,
@@ -85,8 +86,15 @@ export { LightboxProvider, useLightbox, useLightboxOptional } from "./screenshot
 // disclosure defaults (opt-in initial-open seed; for screenshot/test instrumentation)
 export { DisclosureDefaultsProvider, useForcedDefaultOpen } from "./disclosure-context";
 
+// fold memory (cross-remount resting state so wraps never reopen settled folds)
+export { FoldMemoryProvider, inheritFoldRestingState, useFoldMemory } from "./fold-memory";
+export type { FoldRestingState } from "./fold-memory";
+
+// seen activity ids (live tool enter across rail remounts)
+export { SeenActivityIdsProvider, useSeenActivityIds } from "./seen-activity-ids";
+
 // turn-collapse summary chip
-export { BUILT_IN_TURN_SUMMARY_FACET_IDS, TurnSummary } from "./turn-summary";
+export { BUILT_IN_TURN_SUMMARY_FACET_IDS, TurnSummary, useTurnSettleOpen } from "./turn-summary";
 export type {
   BuiltInTurnSummaryFacetId,
   TurnOutcome,