@opengeni/react 1.3.0 → 1.4.0

package/dist/session-ui.js

@@ -27,21 +27,21 @@ import {
   setStartupDetails,
   useStartupDetails,
   userMessageLikelyNeedsDisclosure
-} from "./chunk-PGSX7UCP.js";
+} from "./chunk-LJ2UTJJE.js";
 import "./chunk-UK4TINKT.js";
 import "./chunk-J2QWVSQY.js";
 import "./chunk-C5X5AJXK.js";
 import "./chunk-ZYRGEKWS.js";
-import "./chunk-FZCP527Y.js";
+import "./chunk-CJUO7J5Z.js";
 import {
   ArtifactLabelsProvider,
   DEFAULT_ARTIFACT_LABELS
 } from "./chunk-5CVXZA3Y.js";
 import {
   createOlderHistoryLoadReceipt
-} from "./chunk-WWEUO2PL.js";
-import "./chunk-RC6BZ44Q.js";
-import "./chunk-ERGYJIBB.js";
+} from "./chunk-WZMYFJD3.js";
+import "./chunk-OA6HFRQP.js";
+import "./chunk-AWZLIMKX.js";
 import {
   OpenGeniProvider
 } from "./chunk-3CTRFMAK.js";
@@ -57,7 +57,7 @@ import {
 } from "./chunk-XCHWDJ22.js";
 import "./chunk-A2PI6UMY.js";
 import "./chunk-JVYQRRC4.js";
-import "./chunk-CY7WK5FD.js";
+import "./chunk-LN6TCXD3.js";
 import "./chunk-RSI7XYXL.js";
 import "./chunk-BRM6FVZA.js";
 import "./chunk-LNIRAOA3.js";

package/dist/session.js

@@ -1,39 +1,39 @@
 import {
   createEmbeddedSessionClient,
-  isGoalEvent,
   isLineageRefreshEvent,
   isSessionMcpApprovalPolicyEvent,
-  useGoal,
   useSessionLineage,
   useSessionMcpApprovalPolicy
-} from "./chunk-742CZ3L3.js";
+} from "./chunk-H5X55XH7.js";
 import {
   approvalsFromRequiresAction,
   conversationTimeline,
   createOlderHistoryLoadReceipt,
   humanInputRequestFromEvent,
+  isGoalEvent,
   isHumanInputEvent,
   isTitleEvent,
   isTurnQueueEvent,
   projectPendingApprovals,
   projectPendingHumanInputRequests,
   useFileAttachments,
+  useGoal,
   useHumanInputRequests,
   useSession,
   useSessionControl,
   useSessionEvents,
   useTurnQueue
-} from "./chunk-WWEUO2PL.js";
+} from "./chunk-WZMYFJD3.js";
 import {
   buildTimeline,
   creditExhaustedFromEvents,
   extractSessionRef,
   groupTimeline,
   sessionStatusFromEvents
-} from "./chunk-RC6BZ44Q.js";
+} from "./chunk-OA6HFRQP.js";
 import {
   toolDisplayName
-} from "./chunk-ERGYJIBB.js";
+} from "./chunk-AWZLIMKX.js";
 import {
   FILE_ONLY_MESSAGE_TEXT,
   composeSendInput,

package/dist/timeline/index.d.ts

@@ -2,6 +2,8 @@ export { buildTimeline, creditExhaustedFromEvents, extractSessionRef, groupTimel
 export type { GroupTimelineOptions } from "./projection.js";
 export type { ActivityItem, AgentMessageItem, AuthNeededItem, ContextCompactionItem, FleetDecisionItem, FleetDecisionScoreItem, GoalItem, HumanInputAnswerSummary, HumanInputItem, MachineInputBatchItem, MachineInputMember, MemoryItem, KnowledgeItem, NoticeItem, ReasoningItem, SandboxItem, StartupPhase, StartupPhaseItem, SessionStatusItem, TimelineGroup, TimelineItem, TimelineAnnotationSourceDescriptor, TurnEndItem, ToolCallItem, UserMessageItem, WorkerCompletionItem, WorkerItem, } from "./types.js";
 export { createToolRegistry, rawTypeOf } from "./registry.js";
+export { createSessionRetainedScreenshotLoader, createWorkspaceRetainedArtifactLoader, createWorkspaceRetainedVideoLoader, } from "./retained-loaders.js";
+export type { RetainedArtifactLoaderClient, RetainedScreenshotLoaderClient, RetainedVideoLoaderClient, } from "./retained-loaders.js";
 export type { CreateToolRegistryOptions, RetainedArtifactLoader, RetainedScreenshotLoader, VideoArtifactPlaybackLoader, ToolRegistry, ToolRegistryEntry, ToolRenderer, ToolRendererProps, } from "./registry.js";
 export { createDefaultToolRegistry, defaultToolRegistry } from "./tool-renderers.js";
 export { ActivityRail } from "./activity-rail.js";

package/dist/timeline/retained-loaders.d.ts

@@ -0,0 +1,27 @@
+import type { OpenGeniClient } from "@opengeni/sdk";
+import type { RetainedArtifactLoader, RetainedScreenshotLoader, VideoArtifactPlaybackLoader } from "./registry.js";
+/** SDK methods the workspace retained-artifact loader needs. */
+export type RetainedArtifactLoaderClient = Pick<OpenGeniClient, "createRetainedArtifactDownloadUrl" | "downloadRetainedArtifact">;
+/** SDK method the session retained-screenshot loader needs. */
+export type RetainedScreenshotLoaderClient = Pick<OpenGeniClient, "downloadRetainedScreenshot">;
+/** SDK method the generated-video playback loader needs. */
+export type RetainedVideoLoaderClient = Pick<OpenGeniClient, "createVideoArtifactPlaybackSource">;
+/**
+ * Bind permanent retained-artifact retrieval (generated images, published
+ * files) to one authenticated workspace, for `MessageTimeline`'s
+ * `loadRetainedArtifact`. Images get a short-lived URL; files are assembled
+ * from verified byte ranges.
+ */
+export declare function createWorkspaceRetainedArtifactLoader(client: RetainedArtifactLoaderClient, workspaceId: string): RetainedArtifactLoader;
+/**
+ * Bind the authenticated screenshot downloader to one workspace and session,
+ * for `MessageTimeline`'s `loadRetainedScreenshot`. Fetched metadata must match
+ * the timeline receipt before bytes are handed to React; errors deliberately
+ * contain no storage locator or content.
+ */
+export declare function createSessionRetainedScreenshotLoader(client: RetainedScreenshotLoaderClient, workspaceId: string, sessionId: string): RetainedScreenshotLoader;
+/**
+ * Bind expiring generated-video playback sources to one authenticated
+ * workspace, for `MessageTimeline`'s `loadVideoArtifactPlayback`.
+ */
+export declare function createWorkspaceRetainedVideoLoader(client: RetainedVideoLoaderClient, workspaceId: string): VideoArtifactPlaybackLoader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "1.3.0",
+  "version": "1.4.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": {
@@ -153,8 +153,8 @@
     "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/noto-sans-arabic": "5.2.10",
     "@fontsource-variable/noto-sans-jp": "5.2.10",
-    "@opengeni/connect": "1.3.0",
-    "@opengeni/sdk": "1.3.0",
+    "@opengeni/connect": "1.4.0",
+    "@opengeni/sdk": "1.4.0",
     "clsx": "^2.1.1",
     "dequal": "2.0.3",
     "lucide-react": "^1.8.0",

package/src/components/approval-surface.tsx

@@ -1,4 +1,6 @@
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { dequal } from "dequal";
+import { ChevronLeftIcon, ChevronRightIcon, ShieldCheckIcon } from "lucide-react";
 import {
   OpenGeniApiError,
   toolReviewAction,
@@ -13,6 +15,9 @@ import { toolDisplayName } from "../timeline/tool-display-name";
 import {
   ToolActionReviewCard,
   ToolActionReviewDetails,
+  ToolReviewFrame,
+  DeclineButton,
+  UNRECOVERABLE_TEXT,
   type ToolReviewDetailsLoader,
 } from "./tool-action-review";
 
@@ -37,10 +42,15 @@ export const defaultApprovalSurfaceMessages: ApprovalSurfaceMessages = {
   formatToolName: (name) =>
     name.includes("__") || /^[a-f0-9]{64}$/.test(name)
       ? toolDisplayName(name)
-      : name.replaceAll("_", " ").replaceAll(".", " › "),
+      : humanToolName(name.replaceAll("_", " ").replaceAll(".", " › ")),
   showDetails: "View full details",
   hideDetails: "Back to review",
 };
+/** "batch modify messages" → "Modify messages": how a call is grouped is not what it does. */
+function humanToolName(name: string): string {
+  const phrase = name.replace(/^batch\s+/i, "").trim();
+  return phrase ? phrase.charAt(0).toUpperCase() + phrase.slice(1) : name;
+}
 export type ApprovalSurfaceProps = {
   approvals: PendingApproval[];
   onApprove: (approval: PendingApproval) => void | Promise<void>;
@@ -88,9 +98,10 @@ export function ApprovalSurface({
 }: ApprovalSurfaceProps) {
   const messages = { ...defaultApprovalSurfaceMessages, ...overrides };
   const formatError = useErrorMessage();
-  const [pending, setPending] = useState<{ id: string; decision: "approve" | "reject" } | null>(
-    null,
-  );
+  const [pending, setPending] = useState<{
+    id: string;
+    decision: "approve" | "reject";
+  } | null>(null);
   const pendingRef = useRef<string | null>(null);
   const [decisionError, setDecisionError] = useState<{ cause: unknown } | null>(null);
   const [localSelectedId, setLocalSelectedId] = useState<string | null>(null);
@@ -137,39 +148,43 @@ export function ApprovalSurface({
     <section
       ref={surface}
       aria-label={messages.title}
-      className={cn("og-root box-border w-full min-w-0 border-t border-og-border", className)}
+      className={cn("og-root box-border w-full min-w-0 space-y-2 py-2", className)}
       data-og-approval-surface=""
     >
       {approvals.length > 1 && (
         <nav
           aria-label="Actions to review"
-          className="flex flex-wrap items-center justify-between gap-2 pt-3 text-og-xs text-og-fg-muted"
+          className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1 text-og-xs text-og-fg-muted"
         >
-          <span>{approvals.length} actions need review</span>
-          <div className="flex items-center gap-3">
+          <span className="font-medium text-og-status-waiting">
+            {approvals.length} actions are waiting for you
+          </span>
+          <div className="flex items-center gap-1">
             <button
               type="button"
+              aria-label="Previous action"
               disabled={selectedIndex === 0}
               onClick={() => setSelectedId(approvals[selectedIndex - 1]!.id)}
-              className="min-h-11 disabled:opacity-40"
+              className="inline-flex min-h-8 min-w-8 items-center justify-center rounded-og-md hover:bg-og-hover hover:text-og-fg disabled:opacity-40 disabled:hover:bg-transparent [@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:min-w-11 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/40"
             >
-              Previous
+              <ChevronLeftIcon className="size-4" aria-hidden="true" />
             </button>
-            <span>
+            <span className="tabular-nums" aria-live="polite">
               {selectedIndex + 1} of {approvals.length}
             </span>
             <button
               type="button"
+              aria-label="Next action"
               disabled={selectedIndex === approvals.length - 1}
               onClick={() => setSelectedId(approvals[selectedIndex + 1]!.id)}
-              className="min-h-11 disabled:opacity-40"
+              className="inline-flex min-h-8 min-w-8 items-center justify-center rounded-og-md hover:bg-og-hover hover:text-og-fg disabled:opacity-40 disabled:hover:bg-transparent [@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:min-w-11 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/40"
             >
-              Next
+              <ChevronRightIcon className="size-4" aria-hidden="true" />
             </button>
           </div>
         </nav>
       )}
-      <div className="divide-y divide-og-border">
+      <div>
         {[selected].map((approval) => (
           <ApprovalRequest
             key={approval.id}
@@ -187,7 +202,7 @@ export function ApprovalSurface({
         ))}
       </div>
       {errorText && (
-        <p role="alert" className="m-0 pb-3 text-og-sm text-og-status-failed">
+        <p role="alert" className="m-0 px-1 text-og-sm text-og-status-failed">
           {errorText}
         </p>
       )}
@@ -215,96 +230,197 @@ function ApprovalRequest({
   onApprove: () => void;
   onReject: () => void;
 }) {
-  const [loaded, setLoaded] = useState<ToolActionReview | null>(null);
-  const [failed, setFailed] = useState(false);
-  const [legacy, setLegacy] = useState(false);
   const [retry, setRetry] = useState(0);
+  // Event projection recreates the same approval on unrelated timeline updates.
+  // Keep one request for equal facts, but never reuse it across changed facts,
+  // an explicit retry, or a loader change (the host's client/access boundary).
+  const requestRef = useRef({ approval, loadReview, retry });
+  if (
+    requestRef.current.loadReview !== loadReview ||
+    requestRef.current.retry !== retry ||
+    !dequal(requestRef.current.approval, approval)
+  ) {
+    requestRef.current = { approval, loadReview, retry };
+  }
+  const request = requestRef.current;
+  const [result, setResult] = useState<{
+    request: typeof request;
+    review?: ToolActionReview;
+    failed?: boolean;
+    legacy?: boolean;
+    denied?: boolean;
+  } | null>(null);
+  // Hide stale facts during render, before passive effect cleanup can run.
+  const current = result?.request === request ? result : null;
+  const loaded = current?.review;
+  const failed = current?.failed;
+  const legacy = current?.legacy;
+  const denied = current?.denied;
   const [detailPath, setDetailPath] = useState<string | null>(null);
   useEffect(() => {
     let active = true;
-    setLoaded(null);
-    setFailed(false);
-    setLegacy(false);
-    if (loadReview)
-      void loadReview(approval).then(
+    if (request.loadReview)
+      void request.loadReview(request.approval).then(
         (review) => {
           if (active) {
-            if (review.id !== approval.id) setFailed(true);
-            else setLoaded(review);
+            setResult(
+              review.id !== request.approval.id ? { request, failed: true } : { request, review },
+            );
           }
         },
         (error) => {
           if (active) {
-            if (
+            // 404: no saved review (older or non-connector actions); use the
+            // approval's own arguments. 401/403: this person cannot review it.
+            if (error instanceof OpenGeniApiError && error.status === 404)
+              setResult({ request, legacy: true });
+            else if (
               error instanceof OpenGeniApiError &&
-              error.status === 404 &&
-              approval.arguments !== undefined
+              (error.status === 401 || error.status === 403)
             )
-              setLegacy(true);
-            else setFailed(true);
+              setResult({ request, failed: true, denied: true });
+            else setResult({ request, failed: true });
           }
         },
       );
     return () => {
       active = false;
     };
-  }, [approval, retry, loadReview]);
+  }, [request]);
+  const stableApproval = request.approval;
+  const { formatToolName, approve: approveLabel } = messages;
+  const fallback = useMemo<ToolActionReview>(
+    () => ({
+      version: 1,
+      id: stableApproval.id,
+      actionDigest: "",
+      revision: "legacy",
+      status: "pending",
+      ...toolReviewAction(stableApproval.name, stableApproval.arguments, {
+        kind: "generic",
+        title:
+          stableApproval.display?.title ??
+          formatToolName(stableApproval.display?.toolName ?? stableApproval.name),
+      }),
+      ...(stableApproval.display?.accountLabel
+        ? { accountLabel: stableApproval.display.accountLabel }
+        : {}),
+      ...toolReviewFields(stableApproval.arguments),
+      reason: "",
+      createdAt: "",
+      updatedAt: "",
+      approveLabel,
+      availableActions: stableApproval.arguments === undefined ? [] : ["approve", "reject"],
+      detailsAvailable: stableApproval.arguments !== undefined,
+    }),
+    [stableApproval, formatToolName, approveLabel],
+  );
+  const loadLegacyDetails = useCallback<ToolReviewDetailsLoader>(
+    async (value, path, offset) => ({
+      version: 1,
+      id: value.id,
+      actionDigest: value.actionDigest,
+      ...toolReviewDetails(stableApproval.arguments, undefined, path, offset),
+    }),
+    [stableApproval],
+  );
   if (loadReview && !loaded && !failed && !legacy)
     return (
-      <div className="py-5 text-og-sm text-og-fg-muted" role="status">
-        Loading action details…
-      </div>
+      <ToolReviewFrame
+        tone="waiting"
+        icon={<ShieldCheckIcon className="size-4" aria-hidden="true" />}
+        eyebrow={messages.title}
+        title={fallback.title}
+        subtitle={fallback.accountLabel}
+        aria-busy
+        data-og-tool-review-loading=""
+      >
+        <div role="status" className="space-y-2">
+          <span className="sr-only">Loading action details…</span>
+          <div className="h-3 w-3/4 animate-pulse rounded-og-sm bg-og-fg/8" aria-hidden="true" />
+          <div className="h-3 w-1/2 animate-pulse rounded-og-sm bg-og-fg/8" aria-hidden="true" />
+        </div>
+      </ToolReviewFrame>
+    );
+  if (denied)
+    return (
+      <ToolReviewFrame
+        tone="waiting"
+        icon={<ShieldCheckIcon className="size-4" aria-hidden="true" />}
+        eyebrow={messages.title}
+        title={fallback.title}
+        subtitle={fallback.accountLabel}
+      >
+        <p role="alert" className="m-0 text-og-sm text-og-fg">
+          You don't have access to review this action. Ask someone with access to this chat to
+          decide.
+        </p>
+      </ToolReviewFrame>
     );
   if (failed)
     return (
-      <div className="py-4 text-og-sm text-og-fg" role="alert">
-        Action details could not be loaded.{" "}
-        <button
-          type="button"
-          className="min-h-11 underline underline-offset-4"
-          onClick={() => setRetry((value) => value + 1)}
+      <ToolReviewFrame
+        tone="waiting"
+        icon={<ShieldCheckIcon className="size-4" aria-hidden="true" />}
+        eyebrow={messages.title}
+        title={fallback.title}
+        subtitle={fallback.accountLabel}
+        footer={
+          <div className="ml-auto">
+            <DeclineButton
+              busy={Boolean(actions.disabled || actions.submitting)}
+              submitting={actions.submitting === "reject"}
+              label={messages.reject}
+              onClick={actions.onReject}
+            />
+          </div>
+        }
+      >
+        <p role="alert" className="m-0 text-og-sm text-og-fg">
+          Couldn't load this action, so it can't be approved yet. You can still decline it.{" "}
+          <button
+            type="button"
+            className="min-h-8 font-medium underline underline-offset-4 [@media(pointer:coarse)]:min-h-11 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/40"
+            onClick={() => setRetry((value) => value + 1)}
+          >
+            Try again
+          </button>
+        </p>
+      </ToolReviewFrame>
+    );
+  if (!loaded && stableApproval.arguments === undefined)
+    return (
+      <div data-approval-id={approval.id} data-review-origin="pending">
+        {custom}
+        <ToolReviewFrame
+          tone="waiting"
+          icon={<ShieldCheckIcon className="size-4" aria-hidden="true" />}
+          eyebrow={messages.title}
+          title={fallback.title}
+          subtitle={fallback.accountLabel}
+          data-og-tool-review=""
+          footer={
+            <div className="ml-auto">
+              <DeclineButton
+                busy={Boolean(actions.disabled || actions.submitting)}
+                submitting={actions.submitting === "reject"}
+                label={messages.reject}
+                onClick={actions.onReject}
+              />
+            </div>
+          }
         >
-          Try again
-        </button>
+          <p className="m-0 text-og-sm text-og-fg">{UNRECOVERABLE_TEXT}</p>
+        </ToolReviewFrame>
       </div>
     );
-  const fallback: ToolActionReview = {
-    version: 1,
-    id: approval.id,
-    actionDigest: "",
-    revision: "legacy",
-    status: "pending",
-    ...toolReviewAction(approval.name, approval.arguments, {
-      kind: "generic",
-      title:
-        approval.display?.title ??
-        messages.formatToolName(approval.display?.toolName ?? approval.name),
-    }),
-    ...(approval.display?.accountLabel ? { accountLabel: approval.display.accountLabel } : {}),
-    ...toolReviewFields(approval.arguments),
-    reason: "This action requires your approval.",
-    createdAt: "",
-    updatedAt: "",
-    approveLabel: messages.approve,
-    availableActions: approval.arguments === undefined ? [] : ["approve", "reject"],
-    detailsAvailable: approval.arguments !== undefined,
-  };
   const review = loaded ?? fallback;
   if (detailPath !== null)
     return (
       <ToolActionReviewDetails
         review={review}
         path={detailPath}
-        load={
-          loaded && loadDetails
-            ? loadDetails
-            : async (value, path, offset) => ({
-                version: 1,
-                id: value.id,
-                actionDigest: value.actionDigest,
-                ...toolReviewDetails(approval.arguments, undefined, path, offset),
-              })
-        }
+        load={loaded && loadDetails ? loadDetails : loadLegacyDetails}
         onBack={() => {
           const path = detailPath;
           setDetailPath(null);
@@ -340,11 +456,6 @@ function ApprovalRequest({
               : undefined
         }
       />
-      {!loaded && approval.arguments === undefined && (
-        <p className="pb-3 text-og-sm text-og-fg-muted">
-          Open the task with a compatible client to review this action.
-        </p>
-      )}
     </div>
   );
 }

package/src/components/artifacts/session-artifact-viewer.tsx

@@ -203,7 +203,7 @@ function EditableBody({
     workspaceId: string;
     sessionId: string;
     result:
-      | { kind: "ready"; config: NonNullable<ClientConfig["artifacts"]> }
+      | { kind: "ready"; config: Exclude<NonNullable<ClientConfig["artifacts"]>, false> }
       | { kind: "unavailable" }
       | { kind: "error"; error: unknown };
   } | null>(null);
@@ -359,7 +359,9 @@ function EditableBody({
   );
 }
 
-function artifactCapabilityKey(config: NonNullable<ClientConfig["artifacts"]>): string {
+function artifactCapabilityKey(
+  config: Exclude<NonNullable<ClientConfig["artifacts"]>, false>,
+): string {
   return JSON.stringify([
     config.editableLiveUrl,
     config.cachePartition.accountId,

package/src/components/composer-transcription-control.tsx

@@ -50,6 +50,9 @@ export type ComposerTranscriptionMessages = {
   errorPermissionDenied: string;
   errorNotSupported: string;
   errorUnavailable: string;
+  errorInsufficientCredits: string;
+  errorAllowanceExhausted: string;
+  errorPolicyBlocked: string;
   errorTooLarge: string;
   errorInvalidAudio: string;
   errorStorageUnavailable: string;
@@ -78,6 +81,10 @@ const defaultMessages: ComposerTranscriptionMessages = {
   errorPermissionDenied: "Microphone permission was denied. Your draft was not changed.",
   errorNotSupported: "Voice input is not supported on this device.",
   errorUnavailable: "Voice input is not configured.",
+  errorInsufficientCredits:
+    "Voice input needs Opengeni credits. Add credits, then retry your saved recording.",
+  errorAllowanceExhausted: "Your usage limit was reached. Your recording is saved for later.",
+  errorPolicyBlocked: "Voice input isn't allowed for this account or workspace.",
   errorTooLarge: "Recording is too large. Try a shorter message.",
   errorInvalidAudio: "The recording could not be read. Try again.",
   errorStorageUnavailable: "Voice input stopped because audio could not be saved safely.",
@@ -518,6 +525,13 @@ function restingLevels(count: number): number[] {
 
 function transcriptionErrorMessage(code: string, messages: ComposerTranscriptionMessages): string {
   switch (code) {
+    case "insufficient_credits":
+      return messages.errorInsufficientCredits;
+    case "allowance_exhausted":
+    case "monthly_model_cost_limit":
+      return messages.errorAllowanceExhausted;
+    case "policy_blocked":
+      return messages.errorPolicyBlocked;
     case "permission_denied":
       return messages.errorPermissionDenied;
     case "not_supported":

package/src/components/composer.tsx

@@ -967,6 +967,7 @@ export const Surface = forwardRef<HTMLDivElement, ComposerSurfaceProps>(function
   const controller = useComposerController();
   return (
     <div
+      data-og-composer-surface=""
       {...props}
       ref={ref}
       onDragOver={controller.attachments ? controller.handleDragOver : undefined}