@opengeni/react 2.0.1 → 2.0.2-canary.38789554071001

package/src/components/artifacts/artifact-sandbox.tsx

@@ -7,6 +7,7 @@ import {
   SparklesIcon,
 } from "lucide-react";
 import { useLayoutEffect, useRef, useState, type ReactNode } from "react";
+import type { SiteViewer } from "@opengeni/sdk";
 
 import { cn } from "../../lib/cn";
 import { ArtifactBadge, ArtifactButton, useArtifactLabels } from "./artifact-chrome";
@@ -30,6 +31,8 @@ export type ArtifactSandboxProps = {
   editDisabled?: boolean | undefined;
   onEdit?: (() => void) | undefined;
   toolBridge?: PublishedHtmlArtifactToolBridge | undefined;
+  /** Who is viewing, answered to the Site's `site.viewer` over the bridge. */
+  viewer?: SiteViewer | undefined;
   connectedToolCount?: number | undefined;
   sourceFileCount?: number | undefined;
   fill?: boolean | undefined;
@@ -174,6 +177,7 @@ export function ArtifactSandbox(props: ArtifactSandboxProps) {
         {...(props.theme ? { theme: props.theme } : {})}
         {...(!focused && props.height ? { style: { height: props.height } } : {})}
         {...(props.toolBridge ? { toolBridge: props.toolBridge } : {})}
+        {...(props.viewer ? { viewer: props.viewer } : {})}
         className={cn(
           "block h-[clamp(30rem,62vh,48rem)] w-full border-0 bg-white",
           props.fill && "h-0 min-h-0 flex-1",

package/src/components/artifacts/published-html-artifact-frame.tsx

@@ -1,33 +1,22 @@
 import {
-  OPENGENI_SITE_BRIDGE_BOOTSTRAP_GLOBAL,
-  OPENGENI_SITE_BRIDGE_READY,
-  OPENGENI_SITE_BRIDGE_RESPONSE,
-  OPENGENI_SITE_BRIDGE_VERSION,
-  isOpenGeniSiteBridgeCancelMessage,
-  isOpenGeniSiteBridgeConnectMessage,
-  isOpenGeniSiteBridgeRequestMessage,
-  sanitizeOpenGeniSiteToolCallRequest,
-  sanitizeOpenGeniSiteToolInvokeRequest,
-  type OpenGeniSiteBridgeReadyMessage,
-  type OpenGeniSiteBridgeRequestMessage,
-  isSiteHttpRequest,
-  serveSiteHttp,
-  type SiteHttpRequest,
-  type OpenGeniSiteBridgeResponseMessage,
-  type OpenGeniSiteToolCatalog,
-} from "@opengeni/sdk/site";
-import type {
-  ToolGatewayCallRequest,
-  ToolGatewayCallResponse,
-  ToolGatewayDeclarationsResponse,
-  ToolGatewayResolveRequest,
-  ToolGatewayResolvedTool,
-  ToolGatewayInvokeRequest,
-  ToolGatewayInvokeResponse,
-} from "@opengeni/sdk";
+  SiteBridgeHost,
+  injectSiteBridgeBootstrap,
+  type SiteBridgeToolHandlers,
+  type SiteBridgeViewerHandlers,
+} from "@opengeni/sdk/site-bridge-host";
+import type { OpenGeniSiteSignInResult, OpenGeniSiteViewer } from "@opengeni/sdk/site";
 import { useEffect, useRef, useState, type CSSProperties } from "react";
 import { resolveSiteClientScript } from "@opengeni/sdk/site-document";
 
+export {
+  SiteBridgeDocumentLease,
+  SiteBridgeRequestRegistry,
+  handleSiteBridgeRequest,
+  openGeniSiteBridgePortFromBootstrap,
+  siteBridgeError,
+  siteBridgeReadyMessage,
+} from "@opengeni/sdk/site-bridge-host";
+
 export const PUBLISHED_HTML_ARTIFACT_IFRAME_SANDBOX = [
   "allow-downloads",
   "allow-forms",
@@ -48,68 +37,24 @@ export type PublishedHtmlArtifactFrameProps = {
   className?: string;
   style?: CSSProperties;
   toolBridge?: PublishedHtmlArtifactToolBridge;
+  /**
+   * The signed-in member viewing the Site, answered to `site.viewer`. When
+   * omitted the frame does not advertise viewers and the SDK resolves `null`.
+   */
+  viewer?: OpenGeniSiteViewer;
+  /**
+   * Answer `site.auth.signIn()`. The console viewer is already signed in, so
+   * the default resolves `{ started: false }`.
+   */
+  onSignIn?: () => Promise<OpenGeniSiteSignInResult> | OpenGeniSiteSignInResult;
 };
 
-export type PublishedHtmlArtifactToolBridge = {
-  resolve?: (
-    request: ToolGatewayResolveRequest,
-    options: { signal: AbortSignal },
-  ) => Promise<ToolGatewayResolvedTool>;
-  invoke?: (
-    request: ToolGatewayInvokeRequest,
-    options: { signal: AbortSignal },
-  ) => Promise<ToolGatewayInvokeResponse>;
-  fetch?: (request: SiteHttpRequest, signal: AbortSignal) => Promise<Response>;
-  /** Advertise Site Data: `fetch` forwards `published-artifacts/current` routes to the pinned Site. */
-  siteData?: boolean;
-  catalog: (options: { signal: AbortSignal }) => Promise<OpenGeniSiteToolCatalog>;
-  call: (
-    request: ToolGatewayCallRequest,
-    options: { signal: AbortSignal },
-  ) => Promise<ToolGatewayCallResponse>;
-  declarations?: (options: { signal: AbortSignal }) => Promise<ToolGatewayDeclarationsResponse>;
-};
-
-/** Capabilities the host advertises when a Site connects; Sites never ask for more. */
-export function siteBridgeReadyMessage(
-  bridge: PublishedHtmlArtifactToolBridge | undefined,
-): OpenGeniSiteBridgeReadyMessage {
-  return {
-    type: OPENGENI_SITE_BRIDGE_READY,
-    version: OPENGENI_SITE_BRIDGE_VERSION,
-    ...(bridge?.resolve && bridge?.invoke ? { targetTools: 1 as const } : {}),
-    ...(bridge?.fetch && bridge.siteData ? { siteData: 1 as const } : {}),
-  };
-}
-
-const SITE_BRIDGE_BOOTSTRAP_SCRIPT = `<script>(()=>{const key=${JSON.stringify(
-  OPENGENI_SITE_BRIDGE_BOOTSTRAP_GLOBAL,
-)};const parentWindow=window.parent;if(parentWindow===window)return;window.addEventListener("message",event=>{const data=event.data;if(event.source!==parentWindow||!data||data.type!==${JSON.stringify(
-  OPENGENI_SITE_BRIDGE_READY,
-)}||data.version!==${OPENGENI_SITE_BRIDGE_VERSION}||event.ports.length!==1)return;const port=event.ports[0];const previous=window[key]?.port;if(previous&&previous!==port)previous.close();Object.defineProperty(window,key,{configurable:true,value:{port}});port.start();});})();</script>`;
+/** Host handlers for Site tools and the Site HTTP channel (see `@opengeni/sdk/site-bridge-host`). */
+export type PublishedHtmlArtifactToolBridge = SiteBridgeToolHandlers;
 
 export function publishedHtmlArtifactDocument(html: string, toolBridgeEnabled: boolean): string {
   if (!toolBridgeEnabled) return html;
-  html = resolveSiteClientScript(html);
-  const doctypeEnd = leadingDoctypeEnd(html);
-  if (doctypeEnd >= 0) {
-    return `${html.slice(0, doctypeEnd + 1)}${SITE_BRIDGE_BOOTSTRAP_SCRIPT}${html.slice(doctypeEnd + 1)}`;
-  }
-  return `${SITE_BRIDGE_BOOTSTRAP_SCRIPT}${html}`;
-}
-
-function leadingDoctypeEnd(html: string): number {
-  const lower = html.toLowerCase();
-  let cursor = html.charCodeAt(0) === 0xfeff ? 1 : 0;
-  while (cursor < html.length) {
-    while (/\s/.test(html[cursor] ?? "")) cursor += 1;
-    if (!html.startsWith("<!--", cursor)) break;
-    const commentEnd = html.indexOf("-->", cursor + 4);
-    if (commentEnd < 0) return -1;
-    cursor = commentEnd + 3;
-  }
-  if (!lower.startsWith("<!doctype", cursor)) return -1;
-  return html.indexOf(">", cursor + 9);
+  return injectSiteBridgeBootstrap(resolveSiteClientScript(html));
 }
 
 /**
@@ -143,94 +88,29 @@ export function PublishedHtmlArtifactFrame(props: PublishedHtmlArtifactFrameProp
     );
   }, [props.theme]);
   const bridgeRef = useRef(props.toolBridge);
+  const viewerRef = useRef(siteViewerHandlers(props.viewer, props.onSignIn));
   const onFrameLoadRef = useRef<() => void>(() => undefined);
   const frameLoadPendingRef = useRef(false);
-  const toolBridgeEnabled = props.toolBridge !== undefined;
+  // The bridge (and its bootstrap script) exists only when the host offers
+  // something over it: tools/Site HTTP, or the viewer.
+  const toolBridgeEnabled = props.toolBridge !== undefined || props.viewer !== undefined;
   useEffect(() => {
     bridgeRef.current = props.toolBridge;
   }, [props.toolBridge]);
+  useEffect(() => {
+    viewerRef.current = siteViewerHandlers(props.viewer, props.onSignIn);
+  }, [props.viewer, props.onSignIn]);
   useEffect(() => {
     if (!toolBridgeEnabled || typeof window === "undefined") return;
-    const requests = new SiteBridgeRequestRegistry();
-    const attachToolPort = (data: unknown, ports: readonly MessagePort[]) => {
-      const port = openGeniSiteBridgePortFromBootstrap(data, ports);
-      if (!port) return;
-      requests.addPort(port);
-      port.addEventListener("message", (portEvent: MessageEvent<unknown>) => {
-        const message = portEvent.data;
-        if (isOpenGeniSiteBridgeCancelMessage(message)) {
-          requests.cancel(port, message.requestId);
-          return;
-        }
-        if (isSiteHttpRequest(message) && portEvent.ports.length === 1) {
-          const controller = requests.start(port, message.requestId);
-          if (!controller) {
-            portEvent.ports[0]!.close();
-            return;
-          }
-          void serveSiteHttp(
-            message,
-            portEvent.ports[0]!,
-            async (request, signal) => {
-              const fetch = bridgeRef.current?.fetch;
-              if (!fetch) throw new Error("This Site host does not support the session SDK");
-              return fetch(request, signal);
-            },
-            controller.signal,
-          ).finally(() => requests.complete(port, message.requestId, controller));
-          return;
-        }
-        if (!isOpenGeniSiteBridgeRequestMessage(message)) return;
-        const controller = requests.start(port, message.requestId);
-        if (!controller) {
-          port.postMessage({
-            type: OPENGENI_SITE_BRIDGE_RESPONSE,
-            version: OPENGENI_SITE_BRIDGE_VERSION,
-            requestId: message.requestId,
-            ok: false,
-            error: {
-              code: "duplicate_request_id",
-              message: "A Site tool request with this id is already running",
-              retryable: false,
-            },
-          } satisfies OpenGeniSiteBridgeResponseMessage);
-          return;
-        }
-        void handleSiteBridgeRequest(bridgeRef.current, message, controller.signal)
-          .then((value) => {
-            if (!controller.signal.aborted) {
-              port.postMessage({
-                type: OPENGENI_SITE_BRIDGE_RESPONSE,
-                version: OPENGENI_SITE_BRIDGE_VERSION,
-                requestId: message.requestId,
-                ok: true,
-                value,
-              } satisfies OpenGeniSiteBridgeResponseMessage);
-            }
-          })
-          .catch((error) => {
-            if (!controller.signal.aborted) {
-              port.postMessage({
-                type: OPENGENI_SITE_BRIDGE_RESPONSE,
-                version: OPENGENI_SITE_BRIDGE_VERSION,
-                requestId: message.requestId,
-                ok: false,
-                error: siteBridgeError(error, message.method === "call"),
-              } satisfies OpenGeniSiteBridgeResponseMessage);
-            }
-          })
-          .finally(() => requests.complete(port, message.requestId, controller));
-      });
-      port.addEventListener("messageerror", () => requests.closePort(port));
-      port.start();
-      port.postMessage(siteBridgeReadyMessage(bridgeRef.current));
-    };
-    const documentLease = new SiteBridgeDocumentLease(attachToolPort, () => requests.closeAll());
+    const host = new SiteBridgeHost({
+      tools: () => bridgeRef.current,
+      viewer: () => viewerRef.current,
+    });
     const onFrameLoad = () => {
       frameLoadPendingRef.current = false;
       const frameWindow = frameRef.current?.contentWindow ?? null;
       if (!frameWindow) return;
-      documentLease.load(frameWindow);
+      host.load(frameWindow);
     };
     onFrameLoadRef.current = onFrameLoad;
     if (frameLoadPendingRef.current) {
@@ -239,7 +119,7 @@ export function PublishedHtmlArtifactFrame(props: PublishedHtmlArtifactFrameProp
     }
     return () => {
       onFrameLoadRef.current = () => undefined;
-      documentLease.close();
+      host.close();
     };
   }, [props.html, toolBridgeEnabled]);
   return (
@@ -263,166 +143,13 @@ export function PublishedHtmlArtifactFrame(props: PublishedHtmlArtifactFrameProp
   );
 }
 
-export class SiteBridgeRequestRegistry {
-  private readonly controllersByPort = new Map<MessagePort, Map<string, AbortController>>();
-
-  addPort(port: MessagePort): void {
-    // Several SDK clients may share one document bootstrap. Document teardown,
-    // not another client connecting, revokes all of that document's ports.
-    if (!this.controllersByPort.has(port)) this.controllersByPort.set(port, new Map());
-  }
-
-  start(port: MessagePort, requestId: string): AbortController | null {
-    const controllers = this.controllersByPort.get(port);
-    if (!controllers || controllers.has(requestId)) return null;
-    const controller = new AbortController();
-    controllers.set(requestId, controller);
-    return controller;
-  }
-
-  cancel(port: MessagePort, requestId: string): void {
-    const controllers = this.controllersByPort.get(port);
-    const controller = controllers?.get(requestId);
-    if (!controller) return;
-    controller.abort(new Error("Site tool request cancelled"));
-    controllers!.delete(requestId);
-  }
-
-  complete(port: MessagePort, requestId: string, controller: AbortController): void {
-    const controllers = this.controllersByPort.get(port);
-    if (controllers?.get(requestId) === controller) controllers.delete(requestId);
-  }
-
-  closePort(port: MessagePort): void {
-    const controllers = this.controllersByPort.get(port);
-    if (!controllers) return;
-    for (const controller of controllers.values()) {
-      controller.abort(new Error("Site tool bridge port closed"));
-    }
-    controllers.clear();
-    this.controllersByPort.delete(port);
-    port.close();
-  }
-
-  closeAll(): void {
-    for (const port of [...this.controllersByPort.keys()]) this.closePort(port);
-  }
-}
-
-export class SiteBridgeDocumentLease {
-  private loaded = false;
-  private bootstrapPort: MessagePort | null = null;
-
-  constructor(
-    private readonly attachToolPort: (data: unknown, ports: readonly MessagePort[]) => void,
-    private readonly closeActivePorts: () => void,
-    private readonly createMessageChannel: () => MessageChannel = () => new MessageChannel(),
-  ) {}
-
-  load(frameWindow: Pick<Window, "postMessage">): boolean {
-    if (this.loaded) {
-      this.close();
-      return false;
-    }
-    this.loaded = true;
-    const channel = this.createMessageChannel();
-    this.bootstrapPort = channel.port1;
-    channel.port1.addEventListener("message", (event: MessageEvent<unknown>) => {
-      this.attachToolPort(event.data, event.ports);
-    });
-    channel.port1.start();
-    frameWindow.postMessage(
-      {
-        type: OPENGENI_SITE_BRIDGE_READY,
-        version: OPENGENI_SITE_BRIDGE_VERSION,
-      },
-      "*",
-      [channel.port2],
-    );
-    return true;
-  }
-
-  close(): void {
-    this.bootstrapPort?.close();
-    this.bootstrapPort = null;
-    this.closeActivePorts();
-  }
-}
-
-export function openGeniSiteBridgePortFromBootstrap(
-  data: unknown,
-  ports: readonly MessagePort[],
-): MessagePort | null {
-  if (!isOpenGeniSiteBridgeConnectMessage(data)) return null;
-  return ports.length === 1 ? ports[0]! : null;
-}
-
-export async function handleSiteBridgeRequest(
-  bridge: PublishedHtmlArtifactToolBridge | undefined,
-  message: OpenGeniSiteBridgeRequestMessage,
-  signal: AbortSignal,
-): Promise<
-  | OpenGeniSiteToolCatalog
-  | ToolGatewayCallResponse
-  | ToolGatewayDeclarationsResponse
-  | ToolGatewayResolvedTool
-  | ToolGatewayInvokeResponse
-> {
-  if (!bridge) throw new Error("Site tool bridge is unavailable");
-  if (message.method === "resolve") {
-    if (!bridge.resolve) throw new Error("Targeted Site tools are unavailable");
-    return await bridge.resolve({ target: message.payload.target }, { signal });
-  }
-  if (message.method === "invoke") {
-    if (!bridge.invoke) throw new Error("Targeted Site tools are unavailable");
-    return await bridge.invoke(sanitizeOpenGeniSiteToolInvokeRequest(message.payload), { signal });
-  }
-  if (message.method === "catalog") return await bridge.catalog({ signal });
-  if (message.method === "declarations") {
-    if (!bridge.declarations) throw new Error("Site tool declarations are unavailable");
-    return await bridge.declarations({ signal });
-  }
-  return await bridge.call(sanitizeOpenGeniSiteToolCallRequest(message.payload!), { signal });
-}
-
-export function siteBridgeError(
-  error: unknown,
-  legacyCall = false,
-): {
-  code: string;
-  message: string;
-  retryable: boolean;
-  outcomeUnknown: boolean;
-} {
-  const candidate = error as {
-    code?: unknown;
-    message?: unknown;
-    retryable?: unknown;
-    outcomeUnknown?: unknown;
-    details?: { code?: unknown };
-  };
-  const nestedCode = candidate?.details?.code;
-  const knownPreexecution = candidate?.retryable === true && candidate?.outcomeUnknown === false;
-  const stale =
-    knownPreexecution && (nestedCode === "tool_definition_stale" || nestedCode === "catalog_stale");
-  // Historical saved bundles inspect code alone. A stale-named transport error
-  // without known pre-execution proof must remain an error, not invite replay.
-  const unsafeControl =
-    legacyCall &&
-    !knownPreexecution &&
-    (candidate?.code === "catalog_stale" || candidate?.code === "tool_definition_stale");
-  const message =
-    typeof candidate?.message === "string" ? candidate.message : "Site tool request failed";
+function siteViewerHandlers(
+  viewer: OpenGeniSiteViewer | undefined,
+  onSignIn: PublishedHtmlArtifactFrameProps["onSignIn"],
+): SiteBridgeViewerHandlers | undefined {
+  if (!viewer) return undefined;
   return {
-    code: stale
-      ? nestedCode
-      : unsafeControl
-        ? "site_tool_call_failed"
-        : typeof candidate?.code === "string"
-          ? candidate.code
-          : "site_tool_call_failed",
-    message: unsafeControl ? `[${candidate.code}] ${message}` : message,
-    retryable: candidate?.retryable === true,
-    outcomeUnknown: candidate?.outcomeUnknown === true,
+    viewer: () => viewer,
+    signIn: async () => (onSignIn ? await onSignIn() : { started: false }),
   };
 }

package/src/components/artifacts/site-view.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { SiteViewer } from "@opengeni/sdk";
 
 import { loadSiteSnapshot } from "../../sites-ui";
 import {
@@ -18,6 +19,8 @@ export type SiteViewProps = {
   siteId: string;
   /** Host-owned Site API access. Omit it and the Site renders without workspace tools. */
   toolBridge?: SiteToolBridgeFactory | undefined;
+  /** Who is viewing, answered to the Site's `site.viewer`. */
+  viewer?: SiteViewer | undefined;
   theme?: "light" | "dark" | undefined;
   /** Shown instead of the archived notice; the console links to its full page. */
   archivedMessage?: string | undefined;
@@ -39,6 +42,7 @@ export function SiteView({
   workspaceId,
   siteId,
   toolBridge,
+  viewer,
   theme,
   archivedMessage,
   showTitle = true,
@@ -107,6 +111,7 @@ export function SiteView({
       showTitle={showTitle}
       versionLabel={`v${snapshot.detail.artifact.currentVersion?.revision}`}
       toolBridge={bridge}
+      viewer={viewer}
       connectedToolCount={content.requestedTools.length}
       theme={theme}
       fill

package/src/components/human-input-form.tsx

@@ -31,6 +31,7 @@ import {
   type HumanInputFormMessages,
 } from "../human-input-model";
 import { SecretQuestionField, type SecretFieldHandle } from "./secret-question-field";
+import { linkifyText } from "./linkified-text";
 
 export {
   answersFromDrafts,
@@ -503,8 +504,11 @@ function HumanInputRequestForm({
           </span>
           <div className="min-w-0 flex-1">
             <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
-              <h2 id={titleId} className="text-og-md font-semibold text-og-fg">
-                {resolvedTitle}
+              <h2
+                id={titleId}
+                className="min-w-0 text-og-md font-semibold text-og-fg [overflow-wrap:anywhere]"
+              >
+                {linkifyText(resolvedTitle)}
                 {singleQuestion?.required && !request.allowSkip && !decision ? (
                   <span aria-hidden className="ml-1 text-og-status-failed">
                     *
@@ -523,7 +527,9 @@ function HumanInputRequestForm({
               ) : null}
             </div>
             {resolvedDescription ? (
-              <div className="mt-0.5 text-og-sm text-og-fg-muted">{resolvedDescription}</div>
+              <div className="mt-0.5 text-og-sm text-og-fg-muted [overflow-wrap:anywhere]">
+                {linkifyText(resolvedDescription)}
+              </div>
             ) : null}
             {request.expiresAt ? (
               <p className="mt-1 text-og-xs text-og-fg-subtle">
@@ -557,9 +563,9 @@ function HumanInputRequestForm({
           {decision.question.helpText ||
           decision.accept.description ||
           decision.decline.description ? (
-            <div className="shrink-0 space-y-1 px-4 pt-3 text-og-sm text-og-fg-muted">
+            <div className="shrink-0 space-y-1 px-4 pt-3 text-og-sm text-og-fg-muted [overflow-wrap:anywhere]">
               {decision.question.label && decision.question.helpText ? (
-                <p>{decision.question.helpText}</p>
+                <p>{linkifyText(decision.question.helpText)}</p>
               ) : null}
               {[decision.accept, decision.decline].map((option) =>
                 option.description ? (
@@ -866,13 +872,13 @@ function QuestionControls({
             <label
               id={labelId}
               htmlFor={question.kind === "text" ? fieldId : undefined}
-              className="text-og-sm font-medium text-og-fg"
+              className="min-w-0 text-og-sm font-medium text-og-fg [overflow-wrap:anywhere]"
             >
               {questionNumber === null ? null : (
                 <span className="mr-1.5 tabular-nums text-og-fg-muted">{questionNumber}.</span>
               )}
               {questionNumber === null ? null : " "}
-              {visibleLabel}
+              {linkifyText(visibleLabel)}
               {question.required && !allowSkip ? (
                 <span aria-hidden className="ml-1 text-og-status-failed">
                   *
@@ -885,13 +891,13 @@ function QuestionControls({
             </label>
           </div>
           {question.label ? (
-            <p id={promptId} className="text-og-sm text-og-fg-muted">
-              {question.prompt}
+            <p id={promptId} className="text-og-sm text-og-fg-muted [overflow-wrap:anywhere]">
+              {linkifyText(question.prompt)}
             </p>
           ) : null}
           {question.helpText ? (
-            <p id={helpId} className="text-og-xs text-og-fg-subtle">
-              {question.helpText}
+            <p id={helpId} className="text-og-xs text-og-fg-subtle [overflow-wrap:anywhere]">
+              {linkifyText(question.helpText)}
             </p>
           ) : null}
           {hint ? (
@@ -906,8 +912,8 @@ function QuestionControls({
             <p className="text-og-xs text-og-fg-subtle">{messages.optional}</p>
           ) : null}
           {question.helpText && question.label ? (
-            <p id={helpId} className="mb-1.5 text-og-xs text-og-fg-subtle">
-              {question.helpText}
+            <p id={helpId} className="mb-1.5 text-og-xs text-og-fg-subtle [overflow-wrap:anywhere]">
+              {linkifyText(question.helpText)}
             </p>
           ) : null}
           {hint ? (

package/src/components/linkified-text.tsx

@@ -0,0 +1,79 @@
+import { Fragment, type ReactNode } from "react";
+
+// Bare http(s) URLs in plain agent-written text (question prompts, help text).
+const URL_PATTERN = /https?:\/\/[^\s<>"'`]+/g;
+// Sentence punctuation that follows a URL is not part of it.
+const TRAILING_PUNCTUATION = /[.,;:!?]+$/;
+
+export const LINKIFIED_LINK_CLASS = "font-medium og-link [overflow-wrap:anywhere]";
+
+type Segment = { kind: "text"; value: string } | { kind: "link"; value: string };
+
+function trimUrl(raw: string): string {
+  let url = raw.replace(TRAILING_PUNCTUATION, "");
+  // Drop a closing paren that wraps the URL rather than belonging to it.
+  while (url.endsWith(")") && countOf(url, "(") < countOf(url, ")")) {
+    url = url.slice(0, -1).replace(TRAILING_PUNCTUATION, "");
+  }
+  return url;
+}
+
+function countOf(value: string, char: string): number {
+  let count = 0;
+  for (const current of value) if (current === char) count += 1;
+  return count;
+}
+
+function isValidUrl(value: string): boolean {
+  try {
+    return /^https?:$/u.test(new URL(value).protocol);
+  } catch {
+    return false;
+  }
+}
+
+/** Split plain text into text and bare http(s) URL segments. */
+export function linkifySegments(text: string): Segment[] {
+  const segments: Segment[] = [];
+  let cursor = 0;
+  for (const match of text.matchAll(URL_PATTERN)) {
+    const start = match.index ?? 0;
+    const url = trimUrl(match[0]);
+    if (!isValidUrl(url)) continue;
+    if (start > cursor) segments.push({ kind: "text", value: text.slice(cursor, start) });
+    segments.push({ kind: "link", value: url });
+    cursor = start + url.length;
+  }
+  if (cursor < text.length) segments.push({ kind: "text", value: text.slice(cursor) });
+  return segments;
+}
+
+/**
+ * Render plain text with bare http(s) URLs as links that open in a new tab and
+ * wrap anywhere, so a long sign-in or approval URL stays clickable and inside
+ * its card. Non-string nodes pass through unchanged.
+ */
+export function linkifyText(node: ReactNode): ReactNode {
+  if (typeof node !== "string") return node;
+  const segments = linkifySegments(node);
+  if (!segments.some((segment) => segment.kind === "link")) return node;
+  // Segments are contiguous, so each one's text offset is a stable unique key.
+  let offset = 0;
+  return segments.map((segment) => {
+    const key = offset;
+    offset += segment.value.length;
+    return segment.kind === "link" ? (
+      <a
+        key={key}
+        className={LINKIFIED_LINK_CLASS}
+        href={segment.value}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {segment.value}
+      </a>
+    ) : (
+      <Fragment key={key}>{segment.value}</Fragment>
+    );
+  });
+}

package/src/components/message-timeline.tsx

@@ -92,6 +92,7 @@ import {
   type OlderHistoryLoader,
 } from "../older-history";
 import { Markdown, type MarkdownProps } from "./markdown";
+import { linkifyText } from "./linkified-text";
 import { OpenGeniLinkProvider, type OpenGeniLinkResolver } from "./open-geni-links";
 import {
   TimelineBeforeLayout,
@@ -4476,7 +4477,7 @@ function HumanInputConversationRow({ item }: { item: HumanInputItem }) {
               item.questions.map((question, index) => (
                 <div key={question.id}>
                   {question.label ? (
-                    <p className="text-og-sm font-semibold text-og-fg">
+                    <p className="text-og-sm font-semibold text-og-fg [overflow-wrap:anywhere]">
                       {multipleQuestions ? (
                         <span className="mr-1.5 tabular-nums text-og-fg-muted">{index + 1}.</span>
                       ) : null}
@@ -4486,7 +4487,7 @@ function HumanInputConversationRow({ item }: { item: HumanInputItem }) {
                   ) : null}
                   <p
                     className={cn(
-                      "text-og-md leading-6 text-og-fg",
+                      "text-og-md leading-6 text-og-fg [overflow-wrap:anywhere]",
                       question.label && "mt-0.5 text-og-sm text-og-fg-muted",
                     )}
                   >
@@ -4494,7 +4495,7 @@ function HumanInputConversationRow({ item }: { item: HumanInputItem }) {
                       <span className="mr-1.5 tabular-nums text-og-fg-muted">{index + 1}.</span>
                     ) : null}
                     {!question.label && multipleQuestions ? " " : null}
-                    {question.prompt}
+                    {linkifyText(question.prompt)}
                   </p>
                 </div>
               ))