@opengeni/react 7.6.1-canary.37073905159001 → 7.6.1

package/src/components/approval-surface.tsx

@@ -1,26 +1,21 @@
 import { CheckIcon, ShieldCheckIcon, XIcon } from "lucide-react";
-import { Fragment, useEffect, useId, useRef, useState, type ReactNode } from "react";
+import { 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 needed",
+  title: "Approval required",
   description: "Review the requested action before the agent continues.",
   approve: "Approve",
   reject: "Reject",
@@ -30,8 +25,6 @@ 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 = {
@@ -46,8 +39,6 @@ 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;
@@ -63,68 +54,6 @@ 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) ?? ""}`;
 }
@@ -145,8 +74,6 @@ export function ApprovalSurface({
   className,
 }: ApprovalSurfaceProps) {
   const titleId = useId();
-  const formatError = useErrorMessage();
-  const descriptionId = useId();
   const messages = { ...defaultApprovalSurfaceMessages, ...overrides };
   const [pending, setPending] = useState<{
     approvalKey: string;
@@ -154,7 +81,7 @@ export function ApprovalSurface({
     token: symbol;
   } | null>(null);
   const pendingRef = useRef<{ approvalKey: string; token: symbol } | null>(null);
-  const [decisionError, setDecisionError] = useState<{ cause: unknown } | null>(null);
+  const [decisionError, setDecisionError] = useState<Error | null>(null);
 
   useEffect(() => {
     if (
@@ -189,58 +116,69 @@ export function ApprovalSurface({
       if (pendingRef.current?.token === token) {
         pendingRef.current = null;
         setPending((current) => (current?.token === token ? null : current));
-        setDecisionError({ cause });
+        setDecisionError(cause instanceof Error ? cause : new Error(String(cause)));
       }
     }
   };
-  const errorMessage = decisionError
-    ? formatError(decisionError.cause)
-    : error instanceof Error
-      ? formatError(error)
-      : error;
+  const errorMessage = decisionError?.message ?? (error instanceof Error ? error.message : error);
 
   return (
     <section
       className={cn(
-        "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",
+        "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}
-      aria-describedby={descriptionId}
-      data-og-approval-surface=""
     >
-      <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">
+      <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="flex flex-col gap-3 p-4"
+              className="rounded-og-md border border-og-border bg-og-surface-1 p-3"
             >
               {renderApproval ? (
-                <div className="min-w-0">
-                  <p className="mb-1 text-og-xs font-medium text-og-status-waiting" aria-hidden>
-                    {messages.title}
-                  </p>
-                  {renderApproval(approval)}
-                </div>
+                renderApproval(approval)
               ) : (
-                <ApprovalDetails approval={approval} messages={messages} />
+                <>
+                  <p className="text-og-sm font-medium text-og-fg">
+                    {approval.display?.title ??
+                      messages.formatToolName(approval.display?.toolName ?? approval.name)}
+                  </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}
+                </>
               )}
-              <div className="flex flex-wrap items-center justify-end gap-2">
+              <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-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"
+                  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}
@@ -249,7 +187,7 @@ export function ApprovalSurface({
                   type="button"
                   disabled={busy}
                   onClick={() => void decide(approval, "approve")}
-                  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"
+                  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"
                 >
                   <CheckIcon aria-hidden="true" className="size-3.5" />
                   {active === "approve" ? messages.approving : messages.approve}
@@ -261,72 +199,10 @@ export function ApprovalSurface({
       </div>
 
       {errorMessage ? (
-        <p role="alert" className="px-4 pb-3 text-og-sm text-og-status-failed">
+        <p role="alert" className="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,6 +20,7 @@ import type {
   SiteAuthConnection,
 } from "@opengeni/sdk/interaction";
 import { interactionControlFailureFromError } from "@opengeni/sdk/interaction";
+import { OpenGeniApiError } from "@opengeni/sdk";
 import {
   BugIcon,
   ArchiveIcon,
@@ -70,10 +71,7 @@ import { useSiteAuthConnections } from "../hooks/use-site-auth-connections";
 import { cn } from "../lib/cn";
 import { copyTextToClipboard } from "../lib/clipboard";
 import { formatBytes } from "../lib/format";
-import {
-  isInteractionControlUnavailable,
-  isSourcePlacementChangedError,
-} from "../lib/interaction-errors";
+import { 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";
@@ -436,7 +434,7 @@ export function BrowserViewer({
   }, [frameIsLive]);
   const supportsLiveFrames =
     (browser.session ?? selectedRegistrySession)?.capabilities.liveFrames === true;
-  const controlUnavailable = isInteractionControlUnavailable(browser.error);
+  const controlUnavailable = isBrowserControlUnavailable(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
@@ -921,32 +919,6 @@ 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.
@@ -1050,7 +1022,6 @@ export function BrowserViewer({
             profile={selectedProfile}
             target={browser.selectedTarget}
             observation={browser.observation}
-            inputFailure={browser.inputFailure}
             connectionState={displayConnectionState}
             refreshing={registry.refreshing}
             diagnosticsOpen={diagnosticsView !== null}
@@ -2669,7 +2640,6 @@ 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;
@@ -2697,11 +2667,6 @@ 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}
@@ -3315,6 +3280,12 @@ 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,7 +36,6 @@ 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";
@@ -176,9 +175,7 @@ export const defaultChatComposerMessages: ChatComposerMessages = {
   messagePlaceholder: "Message the agent…",
   pausedPlaceholder: "Message the agent — it will wait in the queue…",
   inputLabel: "Message the agent",
-  // Shortcuts live in the send button's title; the footer stays quiet unless
-  // the host supplies its own hint.
-  keyboardHint: "",
+  keyboardHint: "Enter to queue · Cmd/Ctrl+Enter to steer · Shift+Enter for a new line",
   slashCommandBlocked:
     "That's a slash command — press Enter in the command list to run it, or edit the line to send a message.",
   controlChangedError:
@@ -377,7 +374,6 @@ export function useChatComposerController({
   onPaste,
   messages: messageOverrides,
 }: UseChatComposerControllerOptions) {
-  const formatError = useErrorMessage();
   const messages = useMemo(
     () => ({ ...defaultChatComposerMessages, ...messageOverrides }),
     [messageOverrides],
@@ -667,10 +663,7 @@ export function useChatComposerController({
           tone: "error" as const,
           message: /control changed|paused while/i.test(delivery.error.message)
             ? messages.controlChangedError
-            : formatError(
-                delivery.error,
-                composerSubmissionErrorMessage(delivery.error) || messages.sendFailedError,
-              ),
+            : composerSubmissionErrorMessage(delivery.error) || messages.sendFailedError,
         }
       : null);
   useEffect(() => {