@opengeni/react 0.15.0 → 0.23.0

package/dist/session-context-rgrfElMl.d.ts

@@ -0,0 +1,58 @@
+import { OpenGeniClient, WorkspaceControlEvent, StreamConnectionState } from '@opengeni/sdk';
+
+/**
+ * The slice of `OpenGeniClient` the hooks depend on. Structural, so apps can
+ * pass the real SDK client, a proxy-backed client that routes through their
+ * own API, or a scripted client in tests/demos.
+ */
+type SessionClientLike = Pick<OpenGeniClient, "getClientConfig" | "getSession" | "getSessionLineage" | "updateSession" | "updateSessionPin" | "listSessions" | "listSessionPage" | "sendMessage" | "steerMessage" | "pauseSession" | "resumeSession" | "sendApprovalDecision" | "listHumanInputRequests" | "getHumanInputRequest" | "submitHumanInputResponse" | "listEvents" | "streamEvents" | "getQueue" | "moveQueueItem" | "editQueueItem" | "steerQueueItem" | "deleteQueueItem" | "getComposerDraft" | "saveComposerDraft" | "listTurns" | "getGoal" | "updateGoal" | "deleteGoal" | "clearSessionContext" | "compactSessionContext" | "listScheduledTasks" | "uploadFile" | "getFile" | "createFileDownloadUrl" | "listVariableSets" | "createVariableSet" | "updateVariableSet" | "deleteVariableSet" | "setVariableSetVariable" | "deleteVariableSetVariable" | "listEnvironments" | "createEnvironment" | "updateEnvironment" | "deleteEnvironment" | "setEnvironmentVariable" | "deleteEnvironmentVariable" | "listRigs" | "createRig" | "getRig" | "updateRig" | "deleteRig" | "listRigVersions" | "activateRigVersion" | "listRigChanges" | "proposeRigChange" | "getRigChange" | "verifyRigChange" | "promoteRigChange" | "verifyRig" | "listPacks" | "registerPack" | "enablePack" | "deletePack" | "listWorkspaces" | "createWorkspace" | "updateWorkspace" | "setWorkspaceInferenceState" | "getWorkspace" | "listWorkspaceControlEvents" | "streamWorkspaceControlEvents" | "getBillingUsage" | "getClientConfig" | "getStreamCapabilities" | "acknowledgeStream" | "attachViewer" | "heartbeatViewer" | "detachViewer" | "fsList" | "fsRead" | "fsWrite" | "fsDelete" | "fsMove" | "fsMkdir" | "gitStatus" | "gitDiff" | "getWorkspaceCapture" | "getWorkspaceCaptureFile" | "terminalExec" | "terminalPtyOpen" | "terminalPtyWrite" | "terminalPtyResize" | "terminalPtyClose">;
+/**
+ * Tenant-safe client surface required by the session-only React entry.
+ *
+ * A host proxy can implement only these session-scoped operations instead of
+ * stubbing OpenGeni's workbench, billing, rig, file-system, and workspace
+ * administration APIs. Workspace-level resume is deliberately optional: a
+ * host that does not expose that authority still supports every session-local
+ * composer/control path.
+ */
+type EmbeddedSessionClientLike = Pick<OpenGeniClient, "getSession" | "listEvents" | "streamEvents" | "getComposerDraft" | "saveComposerDraft" | "sendMessage" | "steerMessage" | "getQueue" | "moveQueueItem" | "editQueueItem" | "steerQueueItem" | "deleteQueueItem" | "pauseSession" | "resumeSession" | "sendApprovalDecision"> & {
+    setWorkspaceInferenceState?: OpenGeniClient["setWorkspaceInferenceState"] | undefined;
+};
+/** Session client refinement required only by structured human-input hooks. */
+type EmbeddedHumanInputSessionClientLike = EmbeddedSessionClientLike & Pick<OpenGeniClient, "listHumanInputRequests" | "getHumanInputRequest" | "submitHumanInputResponse">;
+/** Session client refinement required only by MCP approval-policy hooks. */
+type EmbeddedSessionMcpApprovalPolicyClientLike = EmbeddedSessionClientLike & Pick<OpenGeniClient, "updateSessionMcpApprovalPolicy">;
+
+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>;
+};
+type ClientOverride = {
+    client?: SessionClientLike | undefined;
+    workspaceId?: string | undefined;
+};
+type EmbeddedSessionClientOverride = {
+    client?: EmbeddedSessionClientLike | undefined;
+    workspaceId?: string | undefined;
+};
+type EmbeddedHumanInputClientOverride = {
+    client?: EmbeddedHumanInputSessionClientLike | undefined;
+    workspaceId?: string | undefined;
+};
+type EmbeddedSessionMcpApprovalPolicyClientOverride = {
+    client?: EmbeddedSessionMcpApprovalPolicyClientLike | undefined;
+    workspaceId?: string | undefined;
+};
+/** Resolve client + workspace from explicit overrides or the provider. */
+declare function useOpenGeni(override?: ClientOverride): OpenGeniContextValue;
+/**
+ * Resolve the client only — for hooks that are not workspace-scoped
+ * (`useWorkspaces`, `useBillingUsage`).
+ */
+declare function useOpenGeniClient(override?: Pick<ClientOverride, "client">): SessionClientLike;
+
+export { type ClientOverride as C, type EmbeddedSessionClientOverride as E, type OpenGeniContextValue as O, type SessionClientLike as S, type EmbeddedHumanInputSessionClientLike as a, type EmbeddedSessionClientLike as b, type EmbeddedSessionMcpApprovalPolicyClientLike as c, useOpenGeniClient as d, type EmbeddedSessionMcpApprovalPolicyClientOverride as e, type EmbeddedHumanInputClientOverride as f, useOpenGeni as u };

package/dist/session.d.ts

@@ -0,0 +1,4 @@
+export { E as ClientOverride, f as HumanInputClientOverride, a as HumanInputSessionClientLike, b as SessionClientLike, c as SessionMcpApprovalPolicyClientLike, e as SessionMcpApprovalPolicyClientOverride } from './session-context-rgrfElMl.js';
+export { A as ActivityItem, c as AgentMessageItem, e as AuthNeededItem, G as GoalItem, a0 as MemoryItem, N as NoticeItem, P as PendingApproval, f as PendingHumanInputRequest, Q as QueueMutationKind, R as ReasoningItem, k as SandboxItem, l as SessionEventsConnectionState, m as SessionStatusItem, n as TimelineGroup, b as TimelineItem, T as ToolCallItem, o as TurnEndItem, a as TurnOutcome, p as UseHumanInputRequestsOptions, q as UseHumanInputRequestsResult, r as UseSessionControlOptions, s as UseSessionControlResult, t as UseSessionEventsOptions, u as UseSessionEventsResult, v as UseSessionMcpApprovalPolicyOptions, w as UseSessionMcpApprovalPolicyResult, x as UseTurnQueueOptions, U as UseTurnQueueResult, d as UserMessageItem, a1 as WorkerCompletionItem, W as WorkerItem, y as approvalsFromRequiresAction, C as buildTimeline, D as creditExhaustedFromEvents, E as extractSessionRef, F as groupTimeline, H as humanInputRequestFromEvent, I as isHumanInputEvent, J as isSessionMcpApprovalPolicyEvent, K as isTurnQueueEvent, L as projectPendingApprovals, M as projectPendingHumanInputRequests, O as sessionStatusFromEvents, V as toolDisplayName, X as useHumanInputRequests, Y as useSessionControl, Z as useSessionEvents, _ as useSessionMcpApprovalPolicy, $ as useTurnQueue } from './session-Db00TRwl.js';
+export { a as ComposerSendExtras, C as ComposerState, F as FILE_ONLY_MESSAGE_TEXT, U as UseComposerOptions, c as composeSendInput, s as shouldSteerOnKey, b as shouldSubmitOnKey, u as useComposer } from './use-composer-By1wn3MM.js';
+import '@opengeni/sdk';

package/dist/session.js

@@ -0,0 +1,54 @@
+import {
+  approvalsFromRequiresAction,
+  buildTimeline,
+  creditExhaustedFromEvents,
+  extractSessionRef,
+  groupTimeline,
+  humanInputRequestFromEvent,
+  isHumanInputEvent,
+  isSessionMcpApprovalPolicyEvent,
+  isTurnQueueEvent,
+  projectPendingApprovals,
+  projectPendingHumanInputRequests,
+  sessionStatusFromEvents,
+  toolDisplayName,
+  useHumanInputRequests,
+  useSessionControl,
+  useSessionEvents,
+  useSessionMcpApprovalPolicy,
+  useTurnQueue
+} from "./chunk-UAHPKLB6.js";
+import {
+  FILE_ONLY_MESSAGE_TEXT,
+  composeSendInput,
+  shouldSteerOnKey,
+  shouldSubmitOnKey,
+  useComposer
+} from "./chunk-UQS7OQDE.js";
+import "./chunk-I3BJZIG5.js";
+export {
+  FILE_ONLY_MESSAGE_TEXT,
+  approvalsFromRequiresAction,
+  buildTimeline,
+  composeSendInput,
+  creditExhaustedFromEvents,
+  extractSessionRef,
+  groupTimeline,
+  humanInputRequestFromEvent,
+  isHumanInputEvent,
+  isSessionMcpApprovalPolicyEvent,
+  isTurnQueueEvent,
+  projectPendingApprovals,
+  projectPendingHumanInputRequests,
+  sessionStatusFromEvents,
+  shouldSteerOnKey,
+  shouldSubmitOnKey,
+  toolDisplayName,
+  useComposer,
+  useHumanInputRequests,
+  useSessionControl,
+  useSessionEvents,
+  useSessionMcpApprovalPolicy,
+  useTurnQueue
+};
+//# sourceMappingURL=session.js.map

package/dist/session.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/use-composer-By1wn3MM.d.ts

@@ -0,0 +1,99 @@
+import { SessionEvent, EffectiveControlResumeOption, ComposerDraft, ResourceRef, SendMessageInput, EffectiveSessionControl } from '@opengeni/sdk';
+import { E as EmbeddedSessionClientOverride } from './session-context-rgrfElMl.js';
+
+type SessionEventFeedOptions = {
+    /**
+     * Share an existing event log (from `useSessionEvents`) instead of opening
+     * a second stream. When omitted the hook tails the session's event stream
+     * itself, starting at the current `lastSequence`.
+     */
+    events?: SessionEvent[] | undefined;
+    enabled?: boolean | undefined;
+};
+
+type ComposerSendExtras = Omit<SendMessageInput, "text" | "clientEventId">;
+type UseComposerOptions = EmbeddedSessionClientOverride & SessionEventFeedOptions & {
+    /** Called with the accepted text after a successful send. */
+    onSent?: ((text: string) => void) | undefined;
+    /**
+     * Extra message fields (resources, tools, model, reasoningEffort) merged
+     * into every send. A function is evaluated at send time so it can read the
+     * surrounding UI state (attachment pickers, model selectors, ...).
+     */
+    sendExtras?: ComposerSendExtras | (() => ComposerSendExtras) | undefined;
+    /** Latest server-derived workstream control; bound into Send/Steer OCC. */
+    effectiveControl?: EffectiveSessionControl | null | undefined;
+    /** Apply durable model/tool/reasoning settings in the host's controlled UI. */
+    onDraftApplied?: ((draft: ComposerDraft) => void) | undefined;
+    /** Disable remote composer-draft reads and writes for embedded hosts. */
+    draftPersistence?: "durable" | "disabled" | undefined;
+};
+type ComposerState = {
+    value: string;
+    setValue: (value: string) => void;
+    /** Read the current draft synchronously before a destructive replacement. */
+    hasDraftContent: () => boolean;
+    /** Append the draft behind prompts already visible in the queue. */
+    send: (text?: string) => Promise<boolean>;
+    /** Supersede current direction with the draft. */
+    steer: (text?: string) => Promise<boolean>;
+    sending: boolean;
+    canSend: boolean;
+    /** Pause the session without deleting its prompt queue. */
+    pause: (reason?: string) => Promise<void>;
+    pausing: boolean;
+    resume: (reason?: string) => Promise<void>;
+    resumeScope: (option: EffectiveControlResumeOption) => Promise<void>;
+    resuming: boolean;
+    draft: ComposerDraft | null;
+    draftRevision: number;
+    draftLoading: boolean;
+    draftSaving: boolean;
+    draftConflict: Error | null;
+    /** Whether this controller owns a durable server-side draft. */
+    draftPersistence?: "durable" | "disabled" | undefined;
+    /** Apply an atomic queue Edit checkout without a second read. */
+    applyDraft: (draft: ComposerDraft) => void;
+    reloadDraft: () => Promise<void>;
+    resolveDraftConflict: (choice: "keep_mine" | "use_remote") => Promise<void>;
+    restoredResources: ResourceRef[];
+    removeRestoredResource: (index: number) => void;
+    error: Error | null;
+    clearError: () => void;
+};
+/**
+ * Draft + send + Pause/Resume state for the chat composer — the only
+ * human-to-agent input surface. The draft survives a failed send (nothing is
+ * more hostile than losing a typed message); each send carries a generated
+ * `clientEventId` so retries stay idempotent server-side.
+ */
+declare function useComposer(sessionId: string | null | undefined, options?: UseComposerOptions): ComposerState;
+/**
+ * Default text for a file-only message (attachment(s) present, no typed draft).
+ * Kept non-empty so the wire contract (`text: z.string().min(1)`) and the
+ * worker's non-whitespace guard accept it; the attached files still ride in
+ * `resources`. Exported for tests.
+ */
+declare const FILE_ONLY_MESSAGE_TEXT = "(see attached files)";
+/**
+ * Merge the draft text + idempotency key with caller-provided extras. The
+ * text and clientEventId always win over extras. Exported for tests.
+ */
+declare function composeSendInput(text: string, clientEventId: string, extras: ComposerSendExtras | (() => ComposerSendExtras) | undefined, bound?: Partial<SendMessageInput>): SendMessageInput;
+/** Submit on plain Enter; Shift+Enter inserts a newline. Exported for tests. */
+declare function shouldSubmitOnKey(event: {
+    key: string;
+    shiftKey: boolean;
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+    nativeEvent?: {
+        isComposing?: boolean;
+    };
+}): boolean;
+/** Cmd/Ctrl+Enter steers; ordinary Enter appends to the queue. */
+declare function shouldSteerOnKey(event: {
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+}): boolean;
+
+export { type ComposerState as C, FILE_ONLY_MESSAGE_TEXT as F, type SessionEventFeedOptions as S, type UseComposerOptions as U, type ComposerSendExtras as a, shouldSubmitOnKey as b, composeSendInput as c, shouldSteerOnKey as s, useComposer as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "0.15.0",
+  "version": "0.23.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": {
@@ -23,12 +23,26 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./composer": {
+      "types": "./dist/composer.d.ts",
+      "import": "./dist/composer.js"
+    },
+    "./session": {
+      "types": "./dist/session.d.ts",
+      "import": "./dist/session.js"
+    },
     "./machines": {
       "types": "./dist/machines.d.ts",
       "import": "./dist/machines.js"
     },
-    "./styles.css": "./styles/index.css",
-    "./tokens.css": "./styles/tokens.css"
+    "./styles.css": {
+      "types": "./styles/index.d.ts",
+      "import": "./styles/index.css"
+    },
+    "./tokens.css": {
+      "types": "./styles/tokens.d.ts",
+      "import": "./styles/tokens.css"
+    }
   },
   "publishConfig": {
     "access": "public",
@@ -46,7 +60,9 @@
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@opengeni/sdk": "^0.15.0",
+    "@fontsource-variable/noto-sans-arabic": "5.2.10",
+    "@fontsource-variable/noto-sans-jp": "5.2.10",
+    "@opengeni/sdk": "^0.23.0",
     "clsx": "^2.1.1",
     "lucide-react": "^1.8.0",
     "motion": "^12.0.0",

package/src/approvals.ts

@@ -50,9 +50,11 @@ export function approvalsFromRequiresAction(payload: unknown): PendingApproval[]
         ? (raw.rawItem as Record<string, unknown>)
         : {};
     return {
-      id: String(raw.id ?? raw.callId ?? rawItem.callId ?? index),
-      name: String(raw.name ?? "approval"),
-      arguments: raw.arguments,
+      // Mirror the runtime's canonical interruption identity before retaining
+      // the legacy top-level callId fallback for already-normalized payloads.
+      id: String(rawItem.callId ?? rawItem.id ?? raw.id ?? raw.callId ?? raw.name ?? index),
+      name: String(raw.name ?? raw.toolName ?? rawItem.name ?? "approval"),
+      arguments: raw.arguments ?? rawItem.arguments,
       raw: approval,
     };
   });

package/src/client.ts

@@ -21,6 +21,9 @@ export type SessionClientLike = Pick<
   | "pauseSession"
   | "resumeSession"
   | "sendApprovalDecision"
+  | "listHumanInputRequests"
+  | "getHumanInputRequest"
+  | "submitHumanInputResponse"
   | "listEvents"
   | "streamEvents"
   // Turn queue
@@ -111,3 +114,44 @@ export type SessionClientLike = Pick<
   | "terminalPtyResize"
   | "terminalPtyClose"
 >;
+
+/**
+ * Tenant-safe client surface required by the session-only React entry.
+ *
+ * A host proxy can implement only these session-scoped operations instead of
+ * stubbing OpenGeni's workbench, billing, rig, file-system, and workspace
+ * administration APIs. Workspace-level resume is deliberately optional: a
+ * host that does not expose that authority still supports every session-local
+ * composer/control path.
+ */
+export type EmbeddedSessionClientLike = Pick<
+  OpenGeniClient,
+  | "getSession"
+  | "listEvents"
+  | "streamEvents"
+  | "getComposerDraft"
+  | "saveComposerDraft"
+  | "sendMessage"
+  | "steerMessage"
+  | "getQueue"
+  | "moveQueueItem"
+  | "editQueueItem"
+  | "steerQueueItem"
+  | "deleteQueueItem"
+  | "pauseSession"
+  | "resumeSession"
+  | "sendApprovalDecision"
+> & {
+  setWorkspaceInferenceState?: OpenGeniClient["setWorkspaceInferenceState"] | undefined;
+};
+
+/** Session client refinement required only by structured human-input hooks. */
+export type EmbeddedHumanInputSessionClientLike = EmbeddedSessionClientLike &
+  Pick<
+    OpenGeniClient,
+    "listHumanInputRequests" | "getHumanInputRequest" | "submitHumanInputResponse"
+  >;
+
+/** Session client refinement required only by MCP approval-policy hooks. */
+export type EmbeddedSessionMcpApprovalPolicyClientLike = EmbeddedSessionClientLike &
+  Pick<OpenGeniClient, "updateSessionMcpApprovalPolicy">;

package/src/components/approval-surface.tsx

@@ -0,0 +1,198 @@
+import { CheckIcon, ShieldCheckIcon, XIcon } from "lucide-react";
+import { useEffect, useId, useRef, useState, type ReactNode } from "react";
+import type { PendingApproval } from "../approvals";
+import { cn } from "../lib/cn";
+
+export type ApprovalSurfaceMessages = {
+  title: string;
+  description: string;
+  approve: string;
+  reject: string;
+  approving: string;
+  rejecting: string;
+  formatToolName: (name: string) => string;
+};
+
+export const defaultApprovalSurfaceMessages: ApprovalSurfaceMessages = {
+  title: "Approval required",
+  description: "Review the requested action before the agent continues.",
+  approve: "Approve",
+  reject: "Reject",
+  approving: "Approving…",
+  rejecting: "Rejecting…",
+  formatToolName: (name) => name.replaceAll("_", " ").replaceAll(".", " › "),
+};
+
+export type ApprovalSurfaceProps = {
+  approvals: PendingApproval[];
+  onApprove: (approval: PendingApproval) => void | Promise<void>;
+  onReject: (approval: PendingApproval) => void | Promise<void>;
+  responding?: boolean | undefined;
+  error?: string | Error | null | undefined;
+  messages?: Partial<ApprovalSurfaceMessages> | undefined;
+  renderApproval?: ((approval: PendingApproval) => ReactNode) | undefined;
+  className?: string | undefined;
+};
+
+const APPROVAL_ARGUMENT_PREVIEW_CHARACTERS = 4_000;
+
+function approvalArgumentsPreview(value: unknown): string | null {
+  if (value === undefined) return null;
+  let serialized: string;
+  try {
+    serialized =
+      typeof value === "string" ? value : (JSON.stringify(value, null, 2) ?? String(value));
+  } catch {
+    serialized = "[Arguments unavailable]";
+  }
+  const characters = Array.from(serialized);
+  if (characters.length <= APPROVAL_ARGUMENT_PREVIEW_CHARACTERS) return serialized;
+  return `${characters.slice(0, APPROVAL_ARGUMENT_PREVIEW_CHARACTERS).join("")}\n… ${characters.length - APPROVAL_ARGUMENT_PREVIEW_CHARACTERS} characters omitted`;
+}
+
+function approvalOwnershipKey(approval: PendingApproval): string {
+  return `${approval.id}\u0000${approval.name}\u0000${approvalArgumentsPreview(approval.arguments) ?? ""}`;
+}
+
+/**
+ * Host-neutral approval presentation backed by the native pending-approval
+ * projection and control callbacks. It owns only presentation and duplicate
+ * click fencing; OpenGeni remains the authority for approval state.
+ */
+export function ApprovalSurface({
+  approvals,
+  onApprove,
+  onReject,
+  responding = false,
+  error,
+  messages: overrides,
+  renderApproval,
+  className,
+}: ApprovalSurfaceProps) {
+  const titleId = useId();
+  const messages = { ...defaultApprovalSurfaceMessages, ...overrides };
+  const [pending, setPending] = useState<{
+    approvalKey: string;
+    decision: "approve" | "reject";
+    token: symbol;
+  } | null>(null);
+  const pendingRef = useRef<{ approvalKey: string; token: symbol } | null>(null);
+  const [decisionError, setDecisionError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (
+      pending &&
+      !approvals.some((approval) => approvalOwnershipKey(approval) === pending.approvalKey)
+    ) {
+      if (pendingRef.current?.token === pending.token) {
+        pendingRef.current = null;
+      }
+      setPending((current) => (current?.token === pending.token ? null : current));
+    }
+  }, [approvals, pending]);
+
+  if (approvals.length === 0) return null;
+  const busy = responding || pendingRef.current !== null;
+  const decide = async (
+    approval: PendingApproval,
+    decision: "approve" | "reject",
+  ): Promise<void> => {
+    if (responding || pendingRef.current !== null) return;
+    const approvalKey = approvalOwnershipKey(approval);
+    const token = Symbol(approvalKey);
+    pendingRef.current = { approvalKey, token };
+    setPending({ approvalKey, decision, token });
+    setDecisionError(null);
+    try {
+      await (decision === "approve" ? onApprove(approval) : onReject(approval));
+      // Keep the decision fenced until the authoritative projection removes or
+      // replaces this exact approval. A successful callback is transport
+      // acceptance, not settlement.
+    } catch (cause) {
+      if (pendingRef.current?.token === token) {
+        pendingRef.current = null;
+        setPending((current) => (current?.token === token ? null : current));
+        setDecisionError(cause instanceof Error ? cause : new Error(String(cause)));
+      }
+    }
+  };
+  const errorMessage = decisionError?.message ?? (error instanceof Error ? error.message : error);
+
+  return (
+    <section
+      className={cn(
+        "og-root flex w-full flex-col gap-3 rounded-og-lg border border-og-status-waiting/35 bg-og-status-waiting/5 p-4 shadow-og-sm",
+        className,
+      )}
+      aria-labelledby={titleId}
+    >
+      <header className="flex items-start gap-3">
+        <span className="mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-og-md bg-og-status-waiting/12 text-og-status-waiting">
+          <ShieldCheckIcon aria-hidden="true" className="size-4" />
+        </span>
+        <div className="min-w-0">
+          <h2 id={titleId} className="text-og-md font-semibold text-og-fg">
+            {messages.title}
+          </h2>
+          <p className="mt-0.5 text-og-sm text-og-fg-muted">{messages.description}</p>
+        </div>
+      </header>
+
+      <div className="flex flex-col gap-2">
+        {approvals.map((approval) => {
+          const approvalKey = approvalOwnershipKey(approval);
+          const active = pending?.approvalKey === approvalKey ? pending.decision : null;
+          const argumentsPreview = approvalArgumentsPreview(approval.arguments);
+          return (
+            <article
+              key={approval.id}
+              data-approval-id={approval.id}
+              className="rounded-og-md border border-og-border bg-og-surface-1 p-3"
+            >
+              {renderApproval ? (
+                renderApproval(approval)
+              ) : (
+                <>
+                  <p className="text-og-sm font-medium text-og-fg">
+                    {messages.formatToolName(approval.name)}
+                  </p>
+                  {argumentsPreview !== null ? (
+                    <pre className="mt-2 max-h-48 overflow-auto whitespace-pre-wrap break-words rounded-og-sm bg-og-surface-2 p-2 font-mono text-og-xs text-og-fg-muted">
+                      {argumentsPreview}
+                    </pre>
+                  ) : null}
+                </>
+              )}
+              <div className="mt-3 flex flex-wrap justify-end gap-2">
+                <button
+                  type="button"
+                  disabled={busy}
+                  onClick={() => void decide(approval, "reject")}
+                  className="inline-flex min-h-9 items-center gap-1.5 rounded-og-md border border-og-border px-3 py-1.5 text-og-sm font-medium text-og-fg-muted transition-colors hover:bg-og-surface-2 hover:text-og-fg disabled:opacity-50"
+                >
+                  <XIcon aria-hidden="true" className="size-3.5" />
+                  {active === "reject" ? messages.rejecting : messages.reject}
+                </button>
+                <button
+                  type="button"
+                  disabled={busy}
+                  onClick={() => void decide(approval, "approve")}
+                  className="inline-flex min-h-9 items-center gap-1.5 rounded-og-md bg-og-accent px-3 py-1.5 text-og-sm font-medium text-og-accent-fg transition-colors hover:bg-og-accent-strong disabled:opacity-50"
+                >
+                  <CheckIcon aria-hidden="true" className="size-3.5" />
+                  {active === "approve" ? messages.approving : messages.approve}
+                </button>
+              </div>
+            </article>
+          );
+        })}
+      </div>
+
+      {errorMessage ? (
+        <p role="alert" className="text-og-sm text-og-status-failed">
+          {errorMessage}
+        </p>
+      ) : null}
+    </section>
+  );
+}