@opengeni/react 3.3.2 → 3.5.1-canary.0

package/dist/interaction.js

@@ -7,19 +7,20 @@ import {
   useBrowserSession,
   useBrowserSessions,
   useSiteAuthConnections
-} from "./chunk-ZPBTI3TE.js";
+} from "./chunk-W2RGYBCV.js";
 import {
   ComputerViewer,
   useComputerFrameStream,
   useComputerSession,
   useComputerSessions
-} from "./chunk-ELIYWBZR.js";
+} from "./chunk-BV5A4OTE.js";
 import {
   useInteractionInterventions,
   useInteractionInvalidation
 } from "./chunk-H5YGYNXS.js";
 import "./chunk-4MDLEHXL.js";
 import "./chunk-5YK2ZDIG.js";
+import "./chunk-JVYQRRC4.js";
 import "./chunk-KZ73RL76.js";
 import {
   useEmbeddedBrowserInteraction,
@@ -27,7 +28,6 @@ import {
   useEmbeddedInteraction,
   useEmbeddedInterventions
 } from "./chunk-NEXLLTP4.js";
-import "./chunk-JVYQRRC4.js";
 import "./chunk-VTOREEXF.js";
 import "./chunk-22KP6LR5.js";
 

package/dist/model-policy.d.ts

@@ -1,5 +1,6 @@
+import { type ModelPickerBillingClass } from "@opengeni/sdk/model-picker-order";
 import type { ClientModel, ReasoningEffort, WorkspaceModelCatalogModel } from "@opengeni/sdk";
-export type PickerBillingClass = "opengeni_credits" | "external" | "codex_subscription" | "supergrok_subscription" | "byok";
+export type PickerBillingClass = ModelPickerBillingClass;
 export type PickerModelRow<TCatalog extends ClientModel = WorkspaceModelCatalogModel> = {
     id: string;
     label: string;

package/dist/model-policy.js

@@ -15,7 +15,7 @@ import {
   projectPickerRows,
   runnableLatencyModesForModel,
   sortPickerRows
-} from "./chunk-X4A66EWZ.js";
+} from "./chunk-WMGF4Z7X.js";
 export {
   advancedSourceSummary,
   availabilityReasonLabel,

package/dist/{queue-surface-implementation-BSKUWHRI.js → queue-surface-implementation-XL2A6PBM.js}

@@ -3,7 +3,7 @@ import {
   QueueStoppingStatus,
   TimelineAnnotationsChip,
   requestQueueDraftEdit
-} from "./chunk-WSK7G5LE.js";
+} from "./chunk-W3OUAH6M.js";
 import {
   usePortalTokenSource,
   usePortalTokenStyle
@@ -1047,4 +1047,4 @@ export {
   QueueSurface,
   queueComposerCheckoutEnabled
 };
-//# sourceMappingURL=queue-surface-implementation-BSKUWHRI.js.map
+//# sourceMappingURL=queue-surface-implementation-XL2A6PBM.js.map

package/dist/realtime.js

@@ -3,8 +3,7 @@ import {
   PickerAnimatedPage,
   PickerBackHeader,
   PickerNavRow
-} from "./chunk-2DZVYHVO.js";
-import "./chunk-X4A66EWZ.js";
+} from "./chunk-4JFUT22W.js";
 import {
   usePortalTokenSource,
   usePortalTokenStyle
@@ -12,6 +11,7 @@ import {
 import {
   useEmbeddedRealtimeSession
 } from "./chunk-NEXLLTP4.js";
+import "./chunk-WMGF4Z7X.js";
 import {
   cn
 } from "./chunk-22KP6LR5.js";

package/dist/session-ui.js

@@ -11,14 +11,14 @@ import {
   sessionChromeGoalPillLabel,
   sessionChromeGoalPillState,
   userMessageLikelyNeedsDisclosure
-} from "./chunk-YG4QEQF5.js";
-import {
-  createOlderHistoryLoadReceipt
-} from "./chunk-JAQ5K7W6.js";
-import "./chunk-WSK7G5LE.js";
+} from "./chunk-WY3MELVJ.js";
+import "./chunk-W3OUAH6M.js";
+import "./chunk-JVYQRRC4.js";
 import "./chunk-7EAFGICR.js";
 import "./chunk-VZTQ73XT.js";
-import "./chunk-JVYQRRC4.js";
+import {
+  createOlderHistoryLoadReceipt
+} from "./chunk-TJFMMDQU.js";
 import "./chunk-VTOREEXF.js";
 import "./chunk-22KP6LR5.js";
 export {

package/dist/session.js

@@ -17,7 +17,7 @@ import {
   useSessionLineage,
   useSessionMcpApprovalPolicy,
   useTurnQueue
-} from "./chunk-3AGBGTRT.js";
+} from "./chunk-IB27C53Y.js";
 import {
   FILE_ONLY_MESSAGE_TEXT,
   composeSendInput,
@@ -25,6 +25,8 @@ import {
   shouldSubmitOnKey,
   useComposer
 } from "./chunk-IOLVN74D.js";
+import "./chunk-KZ73RL76.js";
+import "./chunk-NEXLLTP4.js";
 import {
   buildTimeline,
   createOlderHistoryLoadReceipt,
@@ -35,9 +37,7 @@ import {
   projectPendingHumanInputRequests,
   sessionStatusFromEvents,
   toolDisplayName
-} from "./chunk-JAQ5K7W6.js";
-import "./chunk-KZ73RL76.js";
-import "./chunk-NEXLLTP4.js";
+} from "./chunk-TJFMMDQU.js";
 import "./chunk-VTOREEXF.js";
 export {
   FILE_ONLY_MESSAGE_TEXT,

package/dist/timeline/types.d.ts

@@ -332,6 +332,8 @@ export type AuthNeededItem = {
     providerDomain: string;
     /** The lapsed connection to reconnect, when the row survived. */
     connectionId: string | null;
+    /** Host-owned bindings must never be routed into OpenGeni's native reconnect flow. */
+    authoritySource?: ToolAuthNeededPayload["authoritySource"] | null | undefined;
     reason: ToolAuthNeededPayload["reason"] | null;
     /** Scopes the provider now needs; may inform the copy, never shown as a raw label. */
     scopes: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "3.3.2",
+  "version": "3.5.1-canary.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": {
@@ -120,7 +120,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": "^3.3.2",
+    "@opengeni/sdk": "^3.5.1-canary.0",
     "clsx": "^2.1.1",
     "dequal": "2.0.3",
     "lucide-react": "^1.8.0",

package/src/components/composer.tsx

@@ -1650,6 +1650,7 @@ function AttachmentChips({
     <div className="flex flex-wrap gap-2 px-3 py-2">
       {attachments.map((attachment) => {
         const failed = attachment.status === "failed";
+        const secureContextRequired = attachment.errorCode === "secure_context_required";
         const statusText =
           attachment.status === "uploading"
             ? messages.uploading
@@ -1660,10 +1661,15 @@ function AttachmentChips({
           <div
             key={attachment.id}
             className={cn(
-              "flex min-w-0 max-w-[240px] items-center gap-2 rounded-og-md border px-2 py-1.5 text-og-sm",
+              "flex min-w-0 items-center gap-2 rounded-og-md border px-2 py-1.5 text-og-sm",
               failed
-                ? "border-og-status-failed/40 bg-og-status-failed/10"
-                : "border-og-border bg-og-surface-2",
+                ? cn(
+                    "border-og-status-failed/40 bg-og-status-failed/10",
+                    secureContextRequired
+                      ? "max-w-full items-start sm:max-w-[32rem]"
+                      : "max-w-[240px]",
+                  )
+                : "max-w-[240px] border-og-border bg-og-surface-2",
             )}
           >
             {attachment.previewUrl && lightbox ? (
@@ -1706,7 +1712,11 @@ function AttachmentChips({
             )}
             <div className="min-w-0 flex-1">
               <div className="truncate font-medium text-og-fg">{attachment.name}</div>
-              {failed ? (
+              {secureContextRequired ? (
+                <div className="break-words text-og-xs leading-4 text-og-status-failed">
+                  {statusText}
+                </div>
+              ) : failed ? (
                 <ComposerTip tip={statusText}>
                   <div className="truncate text-og-xs text-og-status-failed">{statusText}</div>
                 </ComposerTip>
@@ -1717,7 +1727,7 @@ function AttachmentChips({
             {attachment.status === "uploading" ? (
               <LoaderCircleIcon className="size-3.5 shrink-0 animate-og-spin" />
             ) : null}
-            {failed && onRetry ? (
+            {failed && !secureContextRequired && onRetry ? (
               <ComposerTip tip={messages.retryUpload}>
                 <button
                   type="button"

package/src/components/message-timeline.tsx

@@ -3581,6 +3581,7 @@ function AuthNeededRow({
       ? `${provider} tools unavailable`
       : `${actionLabel} ${provider}`;
   const reasonLine = recommendation?.rationale ?? authReasonLine(item.reason);
+  const hostAuthorizationUrl = item.authoritySource === "host" ? item.authorizationUrl : null;
 
   const start = async () => {
     if (!onReconnect || busy) {
@@ -3623,7 +3624,20 @@ function AuthNeededRow({
             ) : null}
           </div>
         </div>
-        {!unavailable && onReconnect ? (
+        {hostAuthorizationUrl ? (
+          <a
+            href={hostAuthorizationUrl}
+            rel="noreferrer"
+            target="_blank"
+            className={cn(
+              PRIMARY_ACTION_CLASS,
+              "transition-colors hover:bg-og-accent-strong pointer-coarse:min-h-9",
+            )}
+          >
+            <RefreshCwIcon className="size-3.5" aria-hidden />
+            {actionLabel}
+          </a>
+        ) : item.authoritySource !== "host" && !unavailable && onReconnect ? (
           <button
             type="button"
             onClick={() => void start()}
@@ -3636,7 +3650,7 @@ function AuthNeededRow({
             <RefreshCwIcon className={cn("size-3.5", busy && "animate-og-spin")} aria-hidden />
             {busy ? "Opening…" : actionLabel}
           </button>
-        ) : !unavailable && item.authorizationUrl ? (
+        ) : item.authoritySource !== "host" && !unavailable && item.authorizationUrl ? (
           <a
             href={item.authorizationUrl}
             rel="noreferrer"

package/src/components/model-policy-picker.tsx

@@ -26,6 +26,7 @@ import {
   findPickerRow,
   groupPickerRowsByBillingClass,
   labelReasoningEffort,
+  payerSummaryForModel,
   projectClientModelRows,
   runnableLatencyModesForModel,
   type PickerBillingClass,
@@ -68,7 +69,8 @@ export const defaultModelPolicyPickerMessages: ModelPolicyPickerMessages = {
     external: "Provider terms and limits apply",
     codex_subscription: "ChatGPT / Codex plan",
     supergrok_subscription: "SuperGrok / xAI plan",
-    byok: "Billed to your AI Gateway",
+    byok: "Billed to the workspace provider account",
+    organization_byok: "Billed to the organization provider account",
   },
 };
 
@@ -158,7 +160,8 @@ export function BillingClassMark(props: {
     external: "External provider",
     codex_subscription: "Codex",
     supergrok_subscription: "SuperGrok",
-    byok: "Bring your own key",
+    byok: "Workspace provider account",
+    organization_byok: "Organization provider account",
   };
   const label = props["aria-label"] ?? labels[props.billingClass];
   const accessibility =
@@ -195,6 +198,18 @@ function isCodexModel(model: ClientModel): boolean {
   return model.id.startsWith("codex/") || model.source === "codex";
 }
 
+function billingClassForMissingSelection(modelId: string): PickerBillingClass {
+  if (modelId.startsWith("workspace-gateway/")) return "byok";
+  if (modelId.startsWith("workspace-openrouter/")) return "byok";
+  // A deployment OpenRouter ID does not encode its workspace-facing cost.
+  // Missing rows therefore use the credits-safe rail instead of falsely
+  // claiming that an unknown former selection was externally funded.
+  if (modelId.startsWith("openrouter/")) return "opengeni_credits";
+  if (modelId.startsWith("codex/")) return "codex_subscription";
+  if (modelId.startsWith("supergrok/")) return "supergrok_subscription";
+  return "opengeni_credits";
+}
+
 function applyCodexOnly(
   rows: ClientPickerModelRow[],
   codexOnly: boolean,
@@ -227,7 +242,11 @@ function defaultNavState(rows: ClientPickerModelRow[], modelId: string): PickerN
       ? { level: "models", rail: onlyRail, modelId: null }
       : { level: "providers", rail: null, modelId: null };
   }
-  return { level: "thinking", rail: selected.billingClass, modelId: selected.id };
+  return {
+    level: "thinking",
+    rail: selected.billingClass,
+    modelId: selected.id,
+  };
 }
 
 function usePickerNavState(
@@ -352,7 +371,11 @@ export function ModelPolicyPickerMenu(
 
   const effectiveNav =
     nav.level === "providers" && groups.length === 1
-      ? { level: "models" as const, rail: groups[0]!.billingClass, modelId: null }
+      ? {
+          level: "models" as const,
+          rail: groups[0]!.billingClass,
+          modelId: null,
+        }
       : nav;
   const activeGroup =
     effectiveNav.rail === null
@@ -416,14 +439,21 @@ export function ModelPolicyPickerMenu(
             <PickerNavRow
               key={`${row.billingClass}:${row.id}`}
               label={row.label}
-              hint={row.unavailableReason ?? undefined}
+              hint={row.unavailableReason ?? payerSummaryForModel(row.catalog)}
               disabled={!row.selectable}
               title={row.unavailableReason ?? undefined}
               active={row.id === props.model}
               testId={`model-picker-choice-${row.id}`}
               onClick={() => {
                 if (row.selectable) {
-                  go({ level: "thinking", rail: row.billingClass, modelId: row.id }, 1);
+                  go(
+                    {
+                      level: "thinking",
+                      rail: row.billingClass,
+                      modelId: row.id,
+                    },
+                    1,
+                  );
                 }
               }}
             />
@@ -605,10 +635,7 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
           )}
         >
           <BillingClassMark
-            billingClass={
-              selected?.billingClass ??
-              (props.model.startsWith("codex/") ? "codex_subscription" : "opengeni_credits")
-            }
+            billingClass={selected?.billingClass ?? billingClassForMissingSelection(props.model)}
             className="text-og-fg"
           />
           <span className="og-model-policy-label-full min-w-0 truncate font-medium text-og-fg max-sm:hidden">

package/src/components/sandbox-workspace.tsx

@@ -424,6 +424,11 @@ export function useSandboxWorkspaceTabs(
   const warmIntents =
     storedWarmIntents.sessionId === sessionId ? storedWarmIntents : emptyWarmIntents(sessionId);
   const { warmTerminal, warmFiles } = warmIntents;
+  // A host-requested file is itself explicit live-file intent. Derive the wake
+  // directly from the request instead of relying on a follow-up effect to copy
+  // it into local state; otherwise a missing or delayed effect leaves the file
+  // waiting for a sandbox that this hook never asks to start.
+  const filesWarmRequested = warmFiles || Boolean(requestedFilePath);
   const requestWarmIntent = useCallback(
     (intent: Exclude<keyof SessionWarmIntents, "sessionId">) => {
       setStoredWarmIntents((previous) => {
@@ -433,10 +438,6 @@ export function useSandboxWorkspaceTabs(
     },
     [sessionId],
   );
-  useEffect(() => {
-    if (requestedFilePath) requestWarmIntent("warmFiles");
-  }, [requestWarmIntent, requestedFilePath, requestedFileRequestId]);
-
   // The session's machine fleet + the active-sandbox pointer. Drives the header
   // chip (which machine + its connection state). Shares the session list poll.
   const machines = useMachines({
@@ -457,7 +458,7 @@ export function useSandboxWorkspaceTabs(
     attachTerminal: terminalEnabled && warmTerminal,
     // Explicit live-file intent only — NOT "the Files tab is open". A cold edit
     // or guarded-file open wakes the box; a glance at the tree/diff does not.
-    attachFiles: workspaceDataEnabled && warmFiles,
+    attachFiles: workspaceDataEnabled && filesWarmRequested,
   });
   const capabilities = caps.capabilities;
   const liveness = capabilities?.liveness;
@@ -665,7 +666,7 @@ export function useSandboxWorkspaceTabs(
     capabilitiesState: caps.state,
     activeMachineState: activeMachine?.state ?? null,
     activeIsSelfhosted: activeMachine?.kind === "selfhosted",
-    wantsWarm: (terminalEnabled && warmTerminal) || (workspaceDataEnabled && warmFiles),
+    wantsWarm: (terminalEnabled && warmTerminal) || (workspaceDataEnabled && filesWarmRequested),
     capturedAt: captureState.capturedAt,
   });
   const workspaceWaking = chip.state === "waking";

package/src/hooks/use-file-attachments.ts

@@ -26,6 +26,8 @@ export type FileAttachment = {
   file?: FileAsset | undefined;
   /** Object-URL for an inline preview; minted for `image/*` files only. */
   previewUrl?: string | undefined;
+  /** Stable SDK failure code for UI behavior that must not parse error copy. */
+  errorCode?: "secure_context_required" | undefined;
   error?: string | undefined;
 };
 
@@ -76,6 +78,27 @@ export type UseFileAttachmentsResult = {
 
 const isImage = (file: File): boolean => file.type.startsWith("image/");
 
+let fallbackAttachmentId = 0;
+
+function createAttachmentId(): string {
+  const cryptoSource = globalThis.crypto;
+  if (typeof cryptoSource?.randomUUID === "function") return cryptoSource.randomUUID();
+  fallbackAttachmentId += 1;
+  // This id is only a browser-local React key and retry lookup, never durable
+  // authority. Keep attachment tracking usable when HTTP withholds randomUUID
+  // or Web Crypto is unavailable so the SDK's typed failure reaches the card.
+  return `attachment:${Date.now().toString(36)}:${fallbackAttachmentId.toString(36)}`;
+}
+
+function secureContextRequiredErrorCode(error: unknown): "secure_context_required" | undefined {
+  return typeof error === "object" &&
+    error !== null &&
+    "code" in error &&
+    error.code === "secure_context_required"
+    ? error.code
+    : undefined;
+}
+
 /**
  * Upload-and-track state for files attached to the next message. Owns the
  * full client-side upload layer: a per-file `uploading | ready | failed`
@@ -198,6 +221,7 @@ export function useFileAttachments(
                     name: asset.filename,
                     contentType: asset.contentType,
                     sizeBytes: asset.sizeBytes,
+                    errorCode: undefined,
                     error: undefined,
                   }
                 : attachment,
@@ -212,6 +236,7 @@ export function useFileAttachments(
                 ? {
                     ...attachment,
                     status: "failed",
+                    errorCode: secureContextRequiredErrorCode(error),
                     error: error instanceof Error ? error.message : String(error),
                   }
                 : attachment,
@@ -225,7 +250,7 @@ export function useFileAttachments(
   const addFiles = useCallback(
     (files: Iterable<File>) => {
       for (const file of files) {
-        const id = crypto.randomUUID();
+        const id = createAttachmentId();
         sources.current.set(id, file);
         const previewUrl = isImage(file) ? URL.createObjectURL(file) : undefined;
         if (previewUrl) previewUrls.current.set(id, previewUrl);
@@ -255,7 +280,7 @@ export function useFileAttachments(
       setAttachments((current) =>
         current.map((attachment) =>
           attachment.id === id
-            ? { ...attachment, status: "uploading", error: undefined }
+            ? { ...attachment, status: "uploading", errorCode: undefined, error: undefined }
             : attachment,
         ),
       );
@@ -305,6 +330,7 @@ export function useFileAttachments(
                 sizeBytes: file.sizeBytes,
                 status: "ready",
                 file,
+                errorCode: undefined,
                 error: undefined,
               }
             : {