@opengeni/react 7.6.1 → 7.7.0-canary.37111190284001

package/src/components/approval-surface.tsx

@@ -1,21 +1,26 @@
 import { CheckIcon, ShieldCheckIcon, XIcon } from "lucide-react";
-import { useEffect, useId, useRef, useState, type ReactNode } from "react";
+import { Fragment, useEffect, useId, useRef, useState, type ReactNode } from "react";
 import type { PendingApproval } from "../approvals";
 import { cn } from "../lib/cn";
+import { useErrorMessage } from "../lib/error-message";
 import { toolDisplayName } from "../timeline/tool-display-name";
 
 export type ApprovalSurfaceMessages = {
   title: string;
+  /** Screen-reader context for the decision; not shown visually. */
   description: string;
   approve: string;
   reject: string;
   approving: string;
   rejecting: string;
   formatToolName: (name: string) => string;
+  /** Toggle for the exact arguments when they are shown as readable fields. */
+  showDetails?: string | undefined;
+  hideDetails?: string | undefined;
 };
 
 export const defaultApprovalSurfaceMessages: ApprovalSurfaceMessages = {
-  title: "Approval required",
+  title: "Approval needed",
   description: "Review the requested action before the agent continues.",
   approve: "Approve",
   reject: "Reject",
@@ -25,6 +30,8 @@ export const defaultApprovalSurfaceMessages: ApprovalSurfaceMessages = {
     name.includes("__") || /^[a-f0-9]{64}$/.test(name)
       ? toolDisplayName(name)
       : name.replaceAll("_", " ").replaceAll(".", " › "),
+  showDetails: "Show exact arguments",
+  hideDetails: "Hide exact arguments",
 };
 
 export type ApprovalSurfaceProps = {
@@ -39,6 +46,8 @@ export type ApprovalSurfaceProps = {
 };
 
 const APPROVAL_ARGUMENT_PREVIEW_CHARACTERS = 4_000;
+const APPROVAL_FIELD_LIMIT = 12;
+const APPROVAL_LIST_LIMIT = 10;
 
 function approvalArgumentsPreview(value: unknown): string | null {
   if (value === undefined) return null;
@@ -54,6 +63,68 @@ function approvalArgumentsPreview(value: unknown): string | null {
   return `${characters.slice(0, APPROVAL_ARGUMENT_PREVIEW_CHARACTERS).join("")}\n… ${characters.length - APPROVAL_ARGUMENT_PREVIEW_CHARACTERS} characters omitted`;
 }
 
+export type ApprovalField = { key: string; label: string; value: string };
+
+const ACRONYMS = new Set(["id", "ids", "url", "uri", "api", "ip", "sku", "utc", "iban", "vat"]);
+
+/** "paymentId" / "payment_id" → "Payment ID". */
+function fieldLabel(key: string): string {
+  const words = key
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2")
+    .split(/[\s_.-]+/)
+    .filter(Boolean)
+    .map((word) => (ACRONYMS.has(word.toLowerCase()) ? word.toUpperCase() : word.toLowerCase()));
+  const label = words.join(" ");
+  return label ? label.charAt(0).toUpperCase() + label.slice(1) : key;
+}
+
+function scalarText(value: unknown): string | null {
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "bigint") return String(value);
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (value === null) return "None";
+  return null;
+}
+
+/**
+ * Readable fields for a flat argument object (scalars and short scalar lists).
+ * Returns null when the arguments are nested, large, or not an object, so the
+ * caller shows the exact JSON instead of a lossy summary.
+ */
+export function approvalArgumentFields(value: unknown): ApprovalField[] | null {
+  let record = value;
+  if (typeof record === "string") {
+    try {
+      record = JSON.parse(record) as unknown;
+    } catch {
+      return null;
+    }
+  }
+  if (!record || typeof record !== "object" || Array.isArray(record)) return null;
+  const entries = Object.entries(record as Record<string, unknown>);
+  if (entries.length === 0 || entries.length > APPROVAL_FIELD_LIMIT) return null;
+  const fields: ApprovalField[] = [];
+  for (const [key, entry] of entries) {
+    let text = scalarText(entry);
+    if (text === null && Array.isArray(entry) && entry.length <= APPROVAL_LIST_LIMIT) {
+      const items = entry.map(scalarText);
+      if (items.every((item): item is string => item !== null)) text = items.join(", ");
+    }
+    if (text === null || text.length > APPROVAL_ARGUMENT_PREVIEW_CHARACTERS) return null;
+    fields.push({ key, label: fieldLabel(key), value: text });
+  }
+  return fields;
+}
+
+function isEmptyArguments(value: unknown): boolean {
+  return (
+    value === undefined ||
+    value === null ||
+    (typeof value === "object" && !Array.isArray(value) && Object.keys(value).length === 0)
+  );
+}
+
 function approvalOwnershipKey(approval: PendingApproval): string {
   return `${approval.id}\u0000${approval.name}\u0000${approvalArgumentsPreview(approval.arguments) ?? ""}`;
 }
@@ -74,6 +145,8 @@ export function ApprovalSurface({
   className,
 }: ApprovalSurfaceProps) {
   const titleId = useId();
+  const formatError = useErrorMessage();
+  const descriptionId = useId();
   const messages = { ...defaultApprovalSurfaceMessages, ...overrides };
   const [pending, setPending] = useState<{
     approvalKey: string;
@@ -81,7 +154,7 @@ export function ApprovalSurface({
     token: symbol;
   } | null>(null);
   const pendingRef = useRef<{ approvalKey: string; token: symbol } | null>(null);
-  const [decisionError, setDecisionError] = useState<Error | null>(null);
+  const [decisionError, setDecisionError] = useState<{ cause: unknown } | null>(null);
 
   useEffect(() => {
     if (
@@ -116,69 +189,58 @@ export function ApprovalSurface({
       if (pendingRef.current?.token === token) {
         pendingRef.current = null;
         setPending((current) => (current?.token === token ? null : current));
-        setDecisionError(cause instanceof Error ? cause : new Error(String(cause)));
+        setDecisionError({ cause });
       }
     }
   };
-  const errorMessage = decisionError?.message ?? (error instanceof Error ? error.message : error);
+  const errorMessage = decisionError
+    ? formatError(decisionError.cause)
+    : error instanceof Error
+      ? formatError(error)
+      : 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",
+        "og-root box-border flex w-full flex-col rounded-og-lg border border-og-status-waiting/35 bg-og-status-waiting/5 shadow-og-sm",
         className,
       )}
       aria-labelledby={titleId}
+      aria-describedby={descriptionId}
+      data-og-approval-surface=""
     >
-      <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">
+      <h2 id={titleId} className="sr-only">
+        {messages.title}
+      </h2>
+      <p id={descriptionId} className="sr-only">
+        {messages.description}
+      </p>
+      <div className="flex flex-col divide-y divide-og-status-waiting/20">
         {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"
+              className="flex flex-col gap-3 p-4"
             >
               {renderApproval ? (
-                renderApproval(approval)
-              ) : (
-                <>
-                  <p className="text-og-sm font-medium text-og-fg">
-                    {approval.display?.title ??
-                      messages.formatToolName(approval.display?.toolName ?? approval.name)}
+                <div className="min-w-0">
+                  <p className="mb-1 text-og-xs font-medium text-og-status-waiting" aria-hidden>
+                    {messages.title}
                   </p>
-                  {approval.display?.accountLabel ? (
-                    <p className="mt-1 break-words text-og-xs text-og-fg-muted">
-                      {approval.display.accountLabel}
-                    </p>
-                  ) : null}
-                  {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}
-                </>
+                  {renderApproval(approval)}
+                </div>
+              ) : (
+                <ApprovalDetails approval={approval} messages={messages} />
               )}
-              <div className="mt-3 flex flex-wrap justify-end gap-2">
+              <div className="flex flex-wrap items-center 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"
+                  className="inline-flex min-h-8 items-center gap-1.5 rounded-og-md border border-og-border bg-og-surface-1 px-3 py-1 text-og-sm font-medium text-og-fg transition-colors hover:border-og-border-strong disabled:opacity-50"
                 >
                   <XIcon aria-hidden="true" className="size-3.5" />
                   {active === "reject" ? messages.rejecting : messages.reject}
@@ -187,7 +249,7 @@ export function ApprovalSurface({
                   type="button"
                   disabled={busy}
                   onClick={() => void decide(approval, "approve")}
-                  className="inline-flex min-h-9 items-center gap-1.5 rounded-og-md border border-og-primary-border bg-og-primary text-og-primary-fg px-3 py-1.5 text-og-sm font-medium transition-colors hover:bg-og-primary-hover disabled:opacity-50"
+                  className="inline-flex min-h-8 items-center gap-1.5 rounded-og-md border border-og-primary-border bg-og-primary px-3 py-1 text-og-sm font-medium text-og-primary-fg transition-colors hover:bg-og-primary-hover disabled:opacity-50"
                 >
                   <CheckIcon aria-hidden="true" className="size-3.5" />
                   {active === "approve" ? messages.approving : messages.approve}
@@ -199,10 +261,72 @@ export function ApprovalSurface({
       </div>
 
       {errorMessage ? (
-        <p role="alert" className="text-og-sm text-og-status-failed">
+        <p role="alert" className="px-4 pb-3 text-og-sm text-og-status-failed">
           {errorMessage}
         </p>
       ) : null}
     </section>
   );
 }
+
+function ApprovalDetails({
+  approval,
+  messages,
+}: {
+  approval: PendingApproval;
+  messages: ApprovalSurfaceMessages;
+}) {
+  const [showExact, setShowExact] = useState(false);
+  const fields = approvalArgumentFields(approval.arguments);
+  const exact = isEmptyArguments(approval.arguments)
+    ? null
+    : approvalArgumentsPreview(approval.arguments);
+  return (
+    <div className="flex min-w-0 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 flex-1">
+        <p className="text-og-xs font-medium text-og-status-waiting">{messages.title}</p>
+        <p className="mt-0.5 break-words text-og-md font-semibold text-og-fg">
+          {approval.display?.title ??
+            messages.formatToolName(approval.display?.toolName ?? approval.name)}
+        </p>
+        {approval.display?.accountLabel ? (
+          <p className="mt-0.5 break-words text-og-xs text-og-fg-muted">
+            {approval.display.accountLabel}
+          </p>
+        ) : null}
+        {fields ? (
+          <dl className="m-0 mt-3 grid grid-cols-[minmax(5.5rem,max-content)_minmax(0,1fr)] gap-x-5 gap-y-1.5 text-og-sm">
+            {fields.map((field) => (
+              <Fragment key={field.key}>
+                <dt className="m-0 text-og-fg-muted">{field.label}</dt>
+                <dd className="m-0 max-h-32 min-w-0 overflow-auto whitespace-pre-wrap break-words text-og-fg">
+                  {field.value}
+                </dd>
+              </Fragment>
+            ))}
+          </dl>
+        ) : null}
+        {exact !== null && (!fields || showExact) ? (
+          <pre className="mt-3 max-h-48 overflow-auto whitespace-pre-wrap break-words rounded-og-sm bg-og-fg/5 p-2.5 font-mono text-og-xs text-og-fg-muted">
+            {exact}
+          </pre>
+        ) : null}
+        {fields && exact !== null ? (
+          <button
+            type="button"
+            aria-expanded={showExact}
+            onClick={() => setShowExact((value) => !value)}
+            className="mt-2 text-og-xs text-og-fg-muted underline-offset-2 hover:text-og-fg hover:underline"
+          >
+            {showExact
+              ? (messages.hideDetails ?? defaultApprovalSurfaceMessages.hideDetails)
+              : (messages.showDetails ?? defaultApprovalSurfaceMessages.showDetails)}
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/components/browser-viewer.tsx

@@ -20,7 +20,6 @@ import type {
   SiteAuthConnection,
 } from "@opengeni/sdk/interaction";
 import { interactionControlFailureFromError } from "@opengeni/sdk/interaction";
-import { OpenGeniApiError } from "@opengeni/sdk";
 import {
   BugIcon,
   ArchiveIcon,
@@ -71,7 +70,10 @@ import { useSiteAuthConnections } from "../hooks/use-site-auth-connections";
 import { cn } from "../lib/cn";
 import { copyTextToClipboard } from "../lib/clipboard";
 import { formatBytes } from "../lib/format";
-import { isSourcePlacementChangedError } from "../lib/interaction-errors";
+import {
+  isInteractionControlUnavailable,
+  isSourcePlacementChangedError,
+} from "../lib/interaction-errors";
 import type { EmbeddedBrowserInteractionClientOverride } from "../session-context";
 import { browserKey, HUMAN_BROWSER_HOME_URL, normalizeBrowserAddress } from "./browser-input";
 import { InteractionInterventionBanner } from "./interaction-intervention-banner";
@@ -434,7 +436,7 @@ export function BrowserViewer({
   }, [frameIsLive]);
   const supportsLiveFrames =
     (browser.session ?? selectedRegistrySession)?.capabilities.liveFrames === true;
-  const controlUnavailable = isBrowserControlUnavailable(browser.error);
+  const controlUnavailable = isInteractionControlUnavailable(browser.error);
   const connectionError = controlUnavailable ? browser.error : (frames.error ?? browser.error);
   // A managed controller can reject a stale attachment while the same browser
   // remains healthy. Only extension-attached Chrome requires a new browser on
@@ -919,6 +921,32 @@ export function BrowserViewer({
                   .catch((cause) => notifyError(cause, "Could not reload."));
             }}
           />
+          {browser.inputFailure ? (
+            <div
+              role="alert"
+              aria-label="Browser input status"
+              className="flex shrink-0 items-center gap-2 border-t border-og-border bg-og-surface-1 px-3 py-2 text-og-xs"
+            >
+              <CircleAlertIcon className="size-4 shrink-0 text-og-status-failed" />
+              <div className="min-w-0 flex-1">
+                <span className="font-medium">
+                  {browser.inputFailure.state === "failed"
+                    ? "Browser input failed"
+                    : "Input result unknown"}
+                </span>
+                <p className="text-og-fg-subtle">
+                  {browser.inputFailure.error?.message ?? "Inspect the page before continuing."}
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={() => void browser.refresh()}
+                className="shrink-0 rounded border border-og-border px-2 py-1 transition hover:bg-og-surface-2"
+              >
+                Check browser
+              </button>
+            </div>
+          ) : null}
           <div className="relative flex min-h-0 min-w-0 flex-1 overflow-hidden">
             <BrowserViewport
               // A new control scope must discard every buffered gesture and queued action.
@@ -1022,6 +1050,7 @@ export function BrowserViewer({
             profile={selectedProfile}
             target={browser.selectedTarget}
             observation={browser.observation}
+            inputFailure={browser.inputFailure}
             connectionState={displayConnectionState}
             refreshing={registry.refreshing}
             diagnosticsOpen={diagnosticsView !== null}
@@ -2640,6 +2669,7 @@ function BrowserStatusBar(props: {
   profile: BrowserIdentity | null;
   target: BrowserTarget | null;
   observation: ReturnType<typeof useBrowserSession>["observation"];
+  inputFailure: ReturnType<typeof useBrowserSession>["inputFailure"];
   connectionState: string;
   refreshing: boolean;
   diagnosticsOpen: boolean;
@@ -2667,6 +2697,11 @@ function BrowserStatusBar(props: {
             ? "Semantic"
             : browserConnectionLabel(props.connectionState)}
       </span>
+      {props.inputFailure ? (
+        <span className="text-og-status-failed">
+          {props.inputFailure.state === "failed" ? "Input failed" : "Input result unknown"}
+        </span>
+      ) : null}
       <span>{props.profile?.name ?? "Temporary browser"}</span>
       <span className="min-w-0 flex-1 truncate">{props.target?.title}</span>
       {props.refreshing ? <LoaderCircleIcon className="size-3 animate-spin" /> : null}
@@ -3280,12 +3315,6 @@ function attachedChromeGenerationLoss(
   return lost?.placement.kind === "attached_device" ? { deviceId: lost.placement.deviceId } : null;
 }
 
-function isBrowserControlUnavailable(error: Error | null): boolean {
-  // Receiving pixels proves only the media channel. A failed control request
-  // must not leave a frozen screenshot presented as an interactive live page.
-  return error instanceof OpenGeniApiError && (error.status >= 500 || error.status === 0);
-}
-
 function isAttachedChromeGenerationLossError(error: Error | null): boolean {
   if (!error) return false;
   return /placement instance changed|controller authority changed/i.test(error.message);

package/src/components/composer.tsx

@@ -36,6 +36,7 @@ import {
   type RefObject,
 } from "react";
 import { argHint, defaultCommands } from "../commands/registry";
+import { useErrorMessage } from "../lib/error-message";
 import type { Notice, SlashCommand } from "../commands/types";
 import type { ComposerState } from "../hooks/use-composer";
 import { shouldSteerOnKey, shouldSubmitOnKey } from "../hooks/use-composer";
@@ -175,7 +176,9 @@ export const defaultChatComposerMessages: ChatComposerMessages = {
   messagePlaceholder: "Message the agent…",
   pausedPlaceholder: "Message the agent — it will wait in the queue…",
   inputLabel: "Message the agent",
-  keyboardHint: "Enter to queue · Cmd/Ctrl+Enter to steer · Shift+Enter for a new line",
+  // Shortcuts live in the send button's title; the footer stays quiet unless
+  // the host supplies its own hint.
+  keyboardHint: "",
   slashCommandBlocked:
     "That's a slash command — press Enter in the command list to run it, or edit the line to send a message.",
   controlChangedError:
@@ -374,6 +377,7 @@ export function useChatComposerController({
   onPaste,
   messages: messageOverrides,
 }: UseChatComposerControllerOptions) {
+  const formatError = useErrorMessage();
   const messages = useMemo(
     () => ({ ...defaultChatComposerMessages, ...messageOverrides }),
     [messageOverrides],
@@ -663,7 +667,10 @@ export function useChatComposerController({
           tone: "error" as const,
           message: /control changed|paused while/i.test(delivery.error.message)
             ? messages.controlChangedError
-            : composerSubmissionErrorMessage(delivery.error) || messages.sendFailedError,
+            : formatError(
+                delivery.error,
+                composerSubmissionErrorMessage(delivery.error) || messages.sendFailedError,
+              ),
         }
       : null);
   useEffect(() => {