@opengeni/react 3.1.0 → 3.1.2

package/src/components/secret-question-field.tsx

@@ -0,0 +1,324 @@
+import type {
+  GeneratePasswordSpec,
+  HumanInputQuestion,
+  HumanInputSecretSaveTo,
+  HumanInputSecretSpec,
+} from "@opengeni/sdk";
+import { EyeIcon, EyeOffIcon, TriangleAlertIcon } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  resolveSecretSaveTo,
+  secretAutocomplete,
+  secretCanGenerate,
+  secretConcealed,
+  secretFieldLabel,
+  secretInputMode,
+  secretPatternMismatch,
+  secretVaultForTarget,
+  type HumanInputFormMessages,
+  type SecretFieldReading,
+} from "../human-input-model";
+import { cn } from "../lib/cn";
+import { useSecretsUi } from "../secrets-ui";
+
+/** Read and clear one secret field at submit time; the value never enters React state. */
+export type SecretFieldHandle = {
+  read: () => SecretFieldReading;
+  clear: () => void;
+  focus: () => void;
+};
+
+const INPUT_CLASS =
+  "h-10 w-full min-w-0 rounded-og-md border border-og-border bg-og-surface-1 px-3 text-og-sm text-og-fg outline-hidden placeholder:text-og-fg-subtle focus:border-og-accent disabled:opacity-50 pointer-coarse:h-11";
+
+export type SecretQuestionFieldProps = {
+  question: HumanInputQuestion & { secret: HumanInputSecretSpec };
+  fieldId: string;
+  messages: HumanInputFormMessages;
+  autoFocus: boolean;
+  /** Save to targets this person may write. Defaults to all three. */
+  allowedSaveTo?: readonly HumanInputSecretSaveTo[] | undefined;
+  error?: string | undefined;
+  /** Question prompt chrome rendered by the form (multi-question cards). */
+  describedBy?: string | undefined;
+  register: (handle: SecretFieldHandle | null) => void;
+  /** The person changed the field: clears a stale validation error. */
+  onEdited: () => void;
+};
+
+/**
+ * The ask card's secret field: an uncontrolled password input (read through a
+ * ref, so the value never reaches React state, props, logs or storage) with
+ * show/hide, optional Generate, an optional username placed first so password
+ * managers pair the two, soft `looksLike`/`pattern` hints, and Save to.
+ */
+export function SecretQuestionField({
+  question,
+  fieldId,
+  messages,
+  autoFocus,
+  allowedSaveTo,
+  error,
+  describedBy,
+  register,
+  onEdited,
+}: SecretQuestionFieldProps) {
+  const spec = question.secret;
+  const ui = useSecretsUi();
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const usernameRef = useRef<HTMLInputElement | null>(null);
+  const saveToChoice = resolveSecretSaveTo(spec, allowedSaveTo);
+  const [saveTo, setSaveTo] = useState<HumanInputSecretSaveTo>(saveToChoice.initial);
+  const saveToRef = useRef(saveTo);
+  saveToRef.current = saveTo;
+  const [revealed, setRevealed] = useState(false);
+  /** No client generator: the server generates, nothing is typed. */
+  const [serverGenerate, setServerGenerate] = useState<GeneratePasswordSpec | null>(null);
+  const serverGenerateRef = useRef(serverGenerate);
+  serverGenerateRef.current = serverGenerate;
+  const [patternMismatch, setPatternMismatch] = useState(false);
+  const [touched, setTouched] = useState(false);
+
+  const concealed = secretConcealed(spec);
+  const canGenerate = secretCanGenerate(spec);
+  const autoComplete = secretAutocomplete(spec);
+  const inputMode = secretInputMode(spec);
+  const label = secretFieldLabel(spec);
+  const inputId = `${fieldId}-secret`;
+  const usernameId = `${fieldId}-username`;
+  const saveToId = `${fieldId}-save-to`;
+  const hintId = `${fieldId}-looks-like`;
+  const warningId = `${fieldId}-pattern`;
+  const errorId = `${fieldId}-error`;
+  const vaultHintId = `${fieldId}-vault`;
+  const downgradeId = `${fieldId}-downgrade`;
+  const vault = secretVaultForTarget(spec, saveTo);
+  const showWarning = patternMismatch && touched && !serverGenerate;
+
+  // A callback ref clears an input as it leaves the DOM (unmount, or the
+  // server-generate swap), so the browser never keeps a detached value.
+  const attachInput = useCallback((node: HTMLInputElement | null) => {
+    if (!node && inputRef.current) inputRef.current.value = "";
+    inputRef.current = node;
+  }, []);
+
+  const checkPattern = useCallback(() => {
+    setPatternMismatch(secretPatternMismatch(spec.pattern, inputRef.current?.value ?? ""));
+  }, [spec.pattern]);
+
+  useEffect(() => {
+    register({
+      read: () => ({
+        value: serverGenerateRef.current ? null : inputRef.current?.value || null,
+        generate: serverGenerateRef.current,
+        username: usernameRef.current?.value ?? null,
+        saveTo: saveToRef.current,
+      }),
+      clear: () => {
+        if (inputRef.current) inputRef.current.value = "";
+        setRevealed(false);
+        setPatternMismatch(false);
+      },
+      focus: () => (inputRef.current ?? usernameRef.current)?.focus({ preventScroll: true }),
+    });
+    return () => register(null);
+  }, [register]);
+
+  const generate = () => {
+    onEdited();
+    if (ui) {
+      const input = inputRef.current;
+      if (!input) return;
+      try {
+        input.value = ui.generatePassword(spec.generate ?? undefined);
+        setRevealed(true);
+        setTouched(true);
+        checkPattern();
+        return;
+      } catch {
+        // A spec the client generator rejects: let the server generate it.
+      }
+    }
+    setServerGenerate(spec.generate ?? {});
+    setRevealed(false);
+  };
+
+  const undoServerGenerate = () => {
+    onEdited();
+    setServerGenerate(null);
+    requestAnimationFrame(() => inputRef.current?.focus({ preventScroll: true }));
+  };
+
+  const inputDescribedBy =
+    [
+      describedBy,
+      spec.looksLike ? hintId : null,
+      showWarning ? warningId : null,
+      error ? errorId : null,
+    ]
+      .filter(Boolean)
+      .join(" ") || undefined;
+  const focusUsername = autoFocus && Boolean(spec.username) && !spec.username?.value;
+
+  return (
+    <div className="flex min-w-0 flex-col gap-3" data-secret-question={question.id}>
+      {spec.username ? (
+        <div className="flex min-w-0 flex-col gap-1.5">
+          <label htmlFor={usernameId} className="text-og-sm font-medium text-og-fg">
+            {spec.username.prompt}
+          </label>
+          <input
+            ref={usernameRef}
+            id={usernameId}
+            name="username"
+            type="text"
+            autoComplete="username"
+            autoCapitalize="none"
+            autoCorrect="off"
+            spellCheck={false}
+            defaultValue={spec.username.value ?? ""}
+            autoFocus={focusUsername}
+            className={INPUT_CLASS}
+          />
+        </div>
+      ) : null}
+
+      <div className="flex min-w-0 flex-col gap-1.5">
+        <label
+          htmlFor={serverGenerate ? undefined : inputId}
+          className="text-og-sm font-medium text-og-fg"
+        >
+          {label}
+        </label>
+        {serverGenerate ? (
+          <div
+            className="flex min-h-10 items-center gap-2 rounded-og-md border border-dashed border-og-border px-3 text-og-sm text-og-fg pointer-coarse:min-h-11"
+            data-secret-server-generate=""
+          >
+            <span role="status" className="min-w-0 flex-1">
+              {messages.secretWillGenerate}
+            </span>
+            <button
+              type="button"
+              onClick={undoServerGenerate}
+              className="og-link inline-flex min-h-10 shrink-0 items-center text-og-sm pointer-coarse:min-h-11"
+            >
+              {messages.secretUndo}
+            </button>
+          </div>
+        ) : (
+          <div className="flex min-w-0 items-center gap-2">
+            <div className="relative min-w-0 flex-1">
+              <input
+                ref={attachInput}
+                id={inputId}
+                name={`secret-${question.id}`}
+                type={concealed && !revealed ? "password" : "text"}
+                autoComplete={autoComplete}
+                inputMode={inputMode}
+                autoCapitalize="none"
+                autoCorrect="off"
+                spellCheck={false}
+                autoFocus={autoFocus && !focusUsername}
+                aria-invalid={Boolean(error)}
+                aria-describedby={inputDescribedBy}
+                aria-required={question.required || undefined}
+                onInput={() => {
+                  onEdited();
+                  checkPattern();
+                }}
+                onBlur={() => {
+                  setTouched(true);
+                  checkPattern();
+                }}
+                className={cn(
+                  INPUT_CLASS,
+                  concealed && "pr-11 pointer-coarse:pr-12",
+                  revealed && "font-og-mono",
+                )}
+              />
+              {concealed ? (
+                <button
+                  type="button"
+                  aria-pressed={revealed}
+                  aria-label={revealed ? messages.secretHide : messages.secretShow}
+                  aria-controls={inputId}
+                  title={revealed ? messages.secretHide : messages.secretShow}
+                  onClick={() => setRevealed((value) => !value)}
+                  className="absolute inset-y-0 right-0 inline-flex w-10 items-center justify-center rounded-r-og-md text-og-fg-muted transition-colors hover:text-og-fg focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-og-accent/55 pointer-coarse:w-11"
+                >
+                  {revealed ? (
+                    <EyeOffIcon aria-hidden="true" className="size-4" />
+                  ) : (
+                    <EyeIcon aria-hidden="true" className="size-4" />
+                  )}
+                </button>
+              ) : null}
+            </div>
+            {canGenerate ? (
+              <button
+                type="button"
+                onClick={generate}
+                className="inline-flex h-10 shrink-0 items-center rounded-og-md border border-og-border bg-og-surface-1 px-3 text-og-sm font-medium text-og-fg transition-colors hover:bg-og-hover disabled:opacity-50 pointer-coarse:h-11"
+              >
+                {messages.secretGenerate}
+              </button>
+            ) : null}
+          </div>
+        )}
+        {spec.looksLike && !serverGenerate ? (
+          <p id={hintId} className="text-og-xs text-og-fg-muted">
+            {messages.secretLooksLike(spec.looksLike)}
+          </p>
+        ) : null}
+        {showWarning ? (
+          <p id={warningId} className="flex items-start gap-1.5 text-og-xs text-og-fg">
+            <TriangleAlertIcon
+              aria-hidden="true"
+              className="mt-px size-3.5 shrink-0 text-og-status-running"
+            />
+            <span>{messages.secretPatternWarning(spec.looksLike ?? null)}</span>
+          </p>
+        ) : null}
+        {error ? (
+          <p id={errorId} role="alert" className="text-og-xs text-og-status-failed">
+            {error}
+          </p>
+        ) : null}
+      </div>
+
+      <div className="flex min-w-0 flex-col gap-1">
+        <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5">
+          <label htmlFor={saveToId} className="text-og-sm font-medium text-og-fg">
+            {messages.secretSaveTo}
+          </label>
+          <select
+            id={saveToId}
+            value={saveTo}
+            onChange={(event) => setSaveTo(event.target.value as HumanInputSecretSaveTo)}
+            aria-describedby={
+              [vaultHintId, saveToChoice.downgraded ? downgradeId : null]
+                .filter(Boolean)
+                .join(" ") || undefined
+            }
+            className="h-10 min-w-[10rem] cursor-pointer rounded-og-md border border-og-border bg-og-surface-1 px-2.5 text-og-sm text-og-fg outline-hidden focus:border-og-accent disabled:opacity-50 pointer-coarse:h-11"
+          >
+            {saveToChoice.options.map((option) => (
+              <option key={option} value={option}>
+                {messages.secretSaveToOptions[option]}
+              </option>
+            ))}
+          </select>
+          <span id={vaultHintId} className="min-w-0 text-og-xs text-og-fg-muted">
+            {messages.secretVaultHint(saveTo, vault)}
+          </span>
+        </div>
+        {saveToChoice.downgraded ? (
+          <p id={downgradeId} className="text-og-xs text-og-fg-muted">
+            {messages.secretSaveToDowngraded(saveToChoice.requested, saveToChoice.initial)}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/components/secret-ref-chip.tsx

@@ -0,0 +1,185 @@
+import type { HumanInputSecretAnswerResult } from "@opengeni/sdk";
+import { FileLockIcon, LockIcon } from "lucide-react";
+import { Fragment, type ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { useSecretsUi, type SecretReferenceLike, type SecretsUi } from "../secrets-ui";
+import { secretReferenceLabel } from "../secret-reference-label";
+
+export {
+  secretReferenceLabel,
+  secretReferenceLabelText,
+  type SecretReferenceLabel,
+} from "../secret-reference-label";
+
+/* Secret references (`{{secret:GitHub/password}}`) read as small chips: a lock
+   glyph and the item and field, with the exact reference on hover. Parsing
+   only: a chip never resolves or shows a value. */
+
+const CHIP_CLASS =
+  // em-relative so one chip reads right in prose, payload mono runs and titles.
+  "og-secret-chip inline-flex max-w-full min-w-0 items-center gap-[0.3em] rounded-full border border-og-border bg-og-surface-2 px-[0.5em] align-baseline font-og-sans text-[0.9em] leading-[1.45] font-medium not-italic text-og-fg no-underline [overflow-wrap:normal] [word-break:normal]";
+
+function SecretChipFrame({
+  icon,
+  primary,
+  suffix,
+  title,
+  srPrefix,
+  href,
+  className,
+  dataAttributes,
+}: {
+  icon: "lock" | "file";
+  primary: string;
+  suffix: string;
+  title: string;
+  srPrefix: string;
+  href?: string | null | undefined;
+  className?: string | undefined;
+  dataAttributes?: Record<string, string> | undefined;
+}) {
+  const Icon = icon === "file" ? FileLockIcon : LockIcon;
+  const body = (
+    <>
+      <Icon aria-hidden="true" className="size-[1em] shrink-0 text-og-fg-muted" />
+      <span className="sr-only">{srPrefix}</span>
+      <span className="min-w-0 max-w-[18em] truncate">{primary}</span>
+      {suffix ? <span className="shrink-0 whitespace-nowrap">{suffix}</span> : null}
+    </>
+  );
+  if (href) {
+    return (
+      <a
+        href={href}
+        title={title}
+        className={cn(
+          CHIP_CLASS,
+          "cursor-pointer transition-colors hover:border-og-border-strong hover:bg-og-surface-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-og-accent/55",
+          className,
+        )}
+        {...dataAttributes}
+      >
+        {body}
+      </a>
+    );
+  }
+  return (
+    <span title={title} className={cn(CHIP_CLASS, className)} {...dataAttributes}>
+      {body}
+    </span>
+  );
+}
+
+export type SecretRefChipProps = {
+  reference: SecretReferenceLike;
+  /** Link to the item when the host provides `hrefForReference`. Off inside other controls. */
+  linkable?: boolean | undefined;
+  className?: string | undefined;
+};
+
+/** One secret reference as a chip. Focusable only when it links. */
+export function SecretRefChip({ reference, linkable = true, className }: SecretRefChipProps) {
+  const ui = useSecretsUi();
+  return (
+    <SecretRefChipView ui={ui} reference={reference} linkable={linkable} className={className} />
+  );
+}
+
+function SecretRefChipView({
+  ui,
+  reference,
+  linkable,
+  className,
+}: {
+  ui: SecretsUi | null;
+  reference: SecretReferenceLike;
+  linkable: boolean;
+  className?: string | undefined;
+}) {
+  const label = secretReferenceLabel(reference);
+  const href = linkable ? (ui?.hrefForReference?.(reference) ?? null) : null;
+  return (
+    <SecretChipFrame
+      icon={reference.kind === "secretfile" ? "file" : "lock"}
+      primary={label.primary}
+      suffix={label.suffix}
+      title={reference.raw}
+      srPrefix={reference.kind === "secretfile" ? "Secret file: " : "Secret: "}
+      href={href}
+      className={className}
+      dataAttributes={{ "data-og-secret-ref": reference.raw }}
+    />
+  );
+}
+
+export type SecretRefTextProps = {
+  text: string;
+  linkable?: boolean | undefined;
+  chipClassName?: string | undefined;
+};
+
+/**
+ * Text with each valid secret reference as a chip. Malformed reference-like
+ * text stays plain, and without a `SecretsUiProvider` the text is unchanged.
+ */
+export function SecretRefText({ text, linkable = true, chipClassName }: SecretRefTextProps) {
+  const ui = useSecretsUi();
+  return <>{renderSecretRefText(ui, text, { linkable, chipClassName })}</>;
+}
+
+/** Fast path: only text that mentions a reference is tokenized. */
+export function mayContainSecretReference(text: string): boolean {
+  return text.includes("{{secret");
+}
+
+export function renderSecretRefText(
+  ui: SecretsUi | null,
+  text: string,
+  options: { linkable?: boolean | undefined; chipClassName?: string | undefined } = {},
+): ReactNode {
+  if (!ui || !mayContainSecretReference(text)) return text;
+  const tokens = ui.tokenize(text);
+  if (!tokens.some((token) => token.type === "reference")) return text;
+  // Keys are source offsets: text runs start where the previous token ended.
+  let offset = 0;
+  return tokens.map((token) => {
+    if (token.type === "reference") {
+      offset = token.reference.end;
+      return (
+        <SecretRefChipView
+          key={`ref-${token.reference.start}`}
+          ui={ui}
+          reference={token.reference}
+          linkable={options.linkable ?? true}
+          className={options.chipClassName}
+        />
+      );
+    }
+    if (token.type === "invalid") {
+      offset = token.end;
+      return <Fragment key={`invalid-${token.start}`}>{token.raw}</Fragment>;
+    }
+    return <Fragment key={`text-${offset}`}>{token.value}</Fragment>;
+  });
+}
+
+export type SecretAnswerChipProps = {
+  result: HumanInputSecretAnswerResult;
+  label: string;
+  className?: string | undefined;
+};
+
+/** The answered ask card: "Saved to Private › GitHub", plus the username. Never a value. */
+export function SecretAnswerChip({ result, label, className }: SecretAnswerChipProps) {
+  return (
+    <SecretChipFrame
+      icon="lock"
+      primary={label}
+      suffix={result.username ? ` · ${result.username}` : ""}
+      title={result.reference}
+      srPrefix=""
+      className={cn("text-og-sm", className)}
+      dataAttributes={{ "data-og-secret-answer": result.reference }}
+    />
+  );
+}

package/src/components/session-capability-frame.tsx

@@ -0,0 +1,197 @@
+import { CheckIcon, InfoIcon, ShieldCheckIcon, XIcon } from "lucide-react";
+import { Dialog } from "radix-ui";
+import { useRef, useState, type ReactNode, type RefObject } from "react";
+import { usePortalTokenStyle } from "../lib/use-portal-token-style";
+
+export type SessionCapabilityFrameProps = {
+  name: string;
+  subtitle: string;
+  logo: string | null;
+  typeLabel: string;
+  description: string;
+  skill: boolean;
+  expanded: boolean;
+  complete: boolean;
+  /** Completion copy must reflect the provider's actual scope of access. */
+  completeLabel?: string;
+  actionLabel: string;
+  /** Direct navigation actions should not announce a dialog on the card. */
+  opensDialog?: boolean;
+  note: string;
+  onOpen(): void;
+  onClose(): void;
+  busy?: boolean;
+  opener?: RefObject<HTMLButtonElement | null>;
+  cardRef?: RefObject<HTMLElement | null>;
+  children?: ReactNode;
+  /** A catalogue row can own the opener while reusing the same details dialog. */
+  dialogOnly?: boolean;
+  /**
+   * Replaces the action when the viewer cannot start setup here (the provider
+   * is not configured, or someone else must connect it). Say why and who can.
+   */
+  actionUnavailable?: ReactNode;
+  /** Host-owned content inside the card, under its status or actions. */
+  details?: ReactNode;
+  /** Protected setup can stay in the conversation instead of opening a dialog. */
+  inlineSetup?: ReactNode;
+};
+
+function Mark({ src, name }: { src: string | null; name: string }) {
+  const [failed, setFailed] = useState<string | null>(null);
+  return (
+    <span className="og-session-capability-logo" aria-hidden>
+      {src && failed !== src ? (
+        <img src={src} alt="" loading="lazy" decoding="async" onError={() => setFailed(src)} />
+      ) : (
+        name.trim().slice(0, 2).toUpperCase()
+      )}
+    </span>
+  );
+}
+
+/** The same conversation card in the console and embedded clients. Setup
+ * content owns the provider flow; this frame owns identity and protected focus. */
+export function SessionCapabilityFrame({
+  name,
+  subtitle,
+  logo,
+  typeLabel,
+  description,
+  skill,
+  expanded,
+  complete,
+  completeLabel,
+  actionLabel,
+  opensDialog = true,
+  note,
+  onOpen,
+  onClose,
+  busy = false,
+  opener,
+  cardRef,
+  children,
+  dialogOnly = false,
+  actionUnavailable,
+  details,
+  inlineSetup,
+}: SessionCapabilityFrameProps) {
+  const localOpener = useRef<HTMLButtonElement>(null);
+  const localCard = useRef<HTMLElement>(null);
+  const buttonRef = opener ?? localOpener;
+  const sectionRef = cardRef ?? localCard;
+  const portalStyle = usePortalTokenStyle(sectionRef.current);
+  const identity = (
+    <>
+      <Mark src={logo} name={name} />
+      <div className="og-session-capability-identity">
+        <h3>{name}</h3>
+        <span>{subtitle}</span>
+      </div>
+      <span className="og-session-capability-type">{typeLabel}</span>
+    </>
+  );
+  return (
+    <div className="og-session-capability">
+      <section
+        hidden={dialogOnly}
+        style={dialogOnly ? { display: "none" } : undefined}
+        ref={sectionRef}
+        tabIndex={-1}
+        aria-label={`${name} setup`}
+        data-state={complete ? "complete" : expanded ? "setup" : "suggested"}
+        className="og-session-capability-shell"
+      >
+        <div className="og-session-capability-header">
+          {identity}
+          {complete ? <CheckIcon size={16} aria-hidden /> : null}
+        </div>
+        {complete ? (
+          <p role="status" className="og-session-capability-copy">
+            {completeLabel ??
+              (skill ? "Installed · Workspace" : "Connected · Available in this conversation")}
+          </p>
+        ) : (
+          <>
+            <p className="og-session-capability-copy">{description}</p>
+            {inlineSetup ? (
+              <div className="og-session-capability-setup">{inlineSetup}</div>
+            ) : actionUnavailable ? (
+              <div className="og-session-capability-actions" data-unavailable="">
+                <span role="note">
+                  <InfoIcon size={13} aria-hidden />
+                  {actionUnavailable}
+                </span>
+              </div>
+            ) : (
+              <div className="og-session-capability-actions">
+                <span>
+                  <ShieldCheckIcon size={13} aria-hidden />
+                  {skill ? "Guidance only · no account access" : "You choose what to authorize"}
+                </span>
+                <button
+                  ref={buttonRef}
+                  type="button"
+                  onClick={onOpen}
+                  disabled={busy}
+                  aria-haspopup={opensDialog ? "dialog" : undefined}
+                  aria-expanded={opensDialog ? expanded : undefined}
+                >
+                  {actionLabel}
+                </button>
+              </div>
+            )}
+          </>
+        )}
+        {details}
+      </section>
+      {!complete && !dialogOnly && note ? (
+        <p className="og-session-capability-note">{note}</p>
+      ) : null}
+      <Dialog.Root
+        open={expanded && !complete}
+        onOpenChange={(open) => {
+          if (!open && !busy) onClose();
+        }}
+      >
+        <Dialog.Portal>
+          <Dialog.Overlay className="og-root og-session-capability-overlay" style={portalStyle} />
+          <Dialog.Content
+            className="og-root og-session-capability-dialog"
+            style={portalStyle}
+            onEscapeKeyDown={(event) => {
+              if (busy) event.preventDefault();
+            }}
+            onInteractOutside={(event) => {
+              if (busy) event.preventDefault();
+            }}
+            onCloseAutoFocus={(event) => {
+              event.preventDefault();
+              const target = buttonRef.current?.isConnected
+                ? buttonRef.current
+                : sectionRef.current;
+              if (target?.isConnected) target.focus();
+            }}
+          >
+            <div className="og-session-capability-dialog-header">
+              <Mark src={logo} name={name} />
+              <div>
+                <Dialog.Title>{name}</Dialog.Title>
+                <Dialog.Description>
+                  {typeLabel}
+                  {subtitle ? ` · ${subtitle}` : ""}
+                </Dialog.Description>
+              </div>
+              {!busy ? (
+                <Dialog.Close aria-label="Close connection setup">
+                  <XIcon size={18} />
+                </Dialog.Close>
+              ) : null}
+            </div>
+            <div className="og-session-capability-dialog-body">{children}</div>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </div>
+  );
+}