@opengeni/react 0.15.0 → 0.20.0

package/dist/session.js

@@ -0,0 +1,50 @@
+import {
+  approvalsFromRequiresAction,
+  buildTimeline,
+  creditExhaustedFromEvents,
+  extractSessionRef,
+  groupTimeline,
+  humanInputRequestFromEvent,
+  isHumanInputEvent,
+  isTurnQueueEvent,
+  projectPendingApprovals,
+  projectPendingHumanInputRequests,
+  sessionStatusFromEvents,
+  toolDisplayName,
+  useHumanInputRequests,
+  useSessionControl,
+  useSessionEvents,
+  useTurnQueue
+} from "./chunk-6UT5OC3P.js";
+import {
+  FILE_ONLY_MESSAGE_TEXT,
+  composeSendInput,
+  shouldSteerOnKey,
+  shouldSubmitOnKey,
+  useComposer
+} from "./chunk-MRSECXRP.js";
+import "./chunk-HHFA4AFX.js";
+export {
+  FILE_ONLY_MESSAGE_TEXT,
+  approvalsFromRequiresAction,
+  buildTimeline,
+  composeSendInput,
+  creditExhaustedFromEvents,
+  extractSessionRef,
+  groupTimeline,
+  humanInputRequestFromEvent,
+  isHumanInputEvent,
+  isTurnQueueEvent,
+  projectPendingApprovals,
+  projectPendingHumanInputRequests,
+  sessionStatusFromEvents,
+  shouldSteerOnKey,
+  shouldSubmitOnKey,
+  toolDisplayName,
+  useComposer,
+  useHumanInputRequests,
+  useSessionControl,
+  useSessionEvents,
+  useTurnQueue
+};
+//# sourceMappingURL=session.js.map

package/dist/session.js.map

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

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

@@ -0,0 +1,112 @@
+import { SessionEvent, EffectiveControlResumeOption, ComposerDraft, ResourceRef, SendMessageInput, EffectiveSessionControl } from '@opengeni/sdk';
+import { E as EmbeddedSessionClientOverride } from './session-context-DIFFlXKc.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;
+    /**
+     * Opt out of OpenGeni's remote composer-draft reads and writes. Embedded
+     * hosts can use this when their human lane permits messages and controls but
+     * deliberately withholds draft mutation because model/tool policy is
+     * server-owned. The unsent value remains local React state and send/steer
+     * continue to work without a draft revision fence. Queue checkout is hidden
+     * because the current queue-edit contract necessarily creates a durable
+     * composer draft.
+     *
+     * @default "durable"
+     */
+    draftPersistence?: "durable" | "disabled" | undefined;
+};
+type ComposerState = {
+    value: string;
+    setValue: (value: string) => void;
+    /** 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. Custom
+     * controllers that omit the field retain the historical durable behavior.
+     * Queue checkout is unavailable when persistence is disabled because the
+     * current queue-edit contract atomically moves the turn into that 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.20.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.20.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,40 @@ 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"
+  >;

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>
+  );
+}