@opengeni/react 6.5.2-canary.41607687019001 → 6.7.0

package/dist/chunk-MVW6HNPI.js

@@ -0,0 +1,250 @@
+"use client";
+import {
+  ErrorText
+} from "./chunk-V4Z4B2E3.js";
+import {
+  useMergedRefs
+} from "./chunk-EDYVC3U3.js";
+import {
+  cn
+} from "./chunk-TXS65BB2.js";
+import {
+  useOpenGeniText
+} from "./chunk-7T2ZE3VT.js";
+
+// src/ui/field.tsx
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef
+} from "react";
+import { CheckIcon, CircleAlertIcon, MinusIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var FieldContext = createContext(null);
+function useField() {
+  return useContext(FieldContext);
+}
+function useFieldControlProps() {
+  const field = useField();
+  if (!field) return {};
+  return {
+    id: field.controlId,
+    "aria-describedby": field.describedBy,
+    "aria-invalid": field.invalid ? true : void 0,
+    "aria-required": field.required ? true : void 0,
+    disabled: field.disabled ? true : void 0
+  };
+}
+function Field({
+  label,
+  hint,
+  error,
+  optional = false,
+  required = false,
+  disabled = false,
+  aside,
+  group = false,
+  id,
+  className,
+  children
+}) {
+  const generatedId = useId();
+  const t = useOpenGeniText();
+  const controlId = id ?? `${generatedId}-control`;
+  const labelId = `${generatedId}-label`;
+  const hintId = `${generatedId}-hint`;
+  const errorId = `${generatedId}-error`;
+  const invalid = Boolean(error);
+  const showHint = Boolean(hint) && !invalid;
+  const describedBy = invalid ? errorId : showHint ? hintId : void 0;
+  const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    label,
+    optional ? /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-xs font-normal text-fg-subtle", children: t("field.optional") }) : null
+  ] });
+  const context = useMemo(
+    () => ({ controlId, labelId, describedBy, invalid, required, disabled }),
+    [controlId, labelId, describedBy, invalid, required, disabled]
+  );
+  return /* @__PURE__ */ jsx(FieldContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: group ? "group" : void 0,
+      "aria-labelledby": group ? labelId : void 0,
+      "aria-describedby": group ? describedBy : void 0,
+      "data-invalid": invalid || void 0,
+      "data-disabled": disabled || void 0,
+      className: cn("flex min-w-0 flex-col", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex min-w-0 items-baseline justify-between gap-3", children: [
+          group ? /* @__PURE__ */ jsx("span", { id: labelId, className: "min-w-0 text-sm font-medium text-fg", children: labelContent }) : /* @__PURE__ */ jsx("label", { id: labelId, htmlFor: controlId, className: "min-w-0 text-sm font-medium text-fg", children: labelContent }),
+          aside ? /* @__PURE__ */ jsx("div", { className: "shrink-0 text-xs text-fg-subtle", children: aside }) : null
+        ] }),
+        children,
+        invalid ? /* @__PURE__ */ jsxs(
+          "p",
+          {
+            id: errorId,
+            className: "mt-1.5 flex min-w-0 items-start gap-1.5 text-xs leading-4.5 text-danger",
+            children: [
+              /* @__PURE__ */ jsx(CircleAlertIcon, { "aria-hidden": "true", className: "mt-0.5 size-3.5 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words", children: /* @__PURE__ */ jsx(ErrorText, { children: error }) })
+            ]
+          }
+        ) : showHint ? /* @__PURE__ */ jsx("p", { id: hintId, className: "mt-1.5 min-w-0 text-xs leading-4.5 break-words text-fg-muted", children: hint }) : null
+      ]
+    }
+  ) });
+}
+function FieldStack({ className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 flex-col gap-6", className), children });
+}
+var controlBase = "block w-full min-w-0 rounded-md! border border-border bg-surface text-sm text-fg transition-colors duration-[120ms] outline-offset-2 placeholder:text-fg-subtle hover:border-border-strong focus-visible:border-brand disabled:cursor-not-allowed disabled:border-border disabled:bg-surface-2 disabled:text-fg-muted read-only:bg-surface-2 read-only:hover:border-border aria-invalid:border-danger aria-invalid:hover:border-danger pointer-coarse:text-base";
+var TextInput = /* @__PURE__ */ forwardRef(function TextInput2({ className, mono = false, suppressAutofill = false, type = "text", ...props }, ref) {
+  const fieldProps = useFieldControlProps();
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type,
+      "data-slot": "text-input",
+      ...fieldProps,
+      ...props,
+      ...suppressAutofill ? { autoComplete: "off", "data-1p-ignore": true, "data-lpignore": "true" } : {},
+      className: cn(
+        controlBase,
+        "h-9 px-3 pointer-coarse:h-11",
+        mono && "font-mono text-xs pointer-coarse:text-base",
+        className
+      )
+    }
+  );
+});
+var TextArea = /* @__PURE__ */ forwardRef(function TextArea2({ className, mono = false, rows = 3, style, ...props }, ref) {
+  const fieldProps = useFieldControlProps();
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref,
+      rows,
+      "data-slot": "text-area",
+      ...fieldProps,
+      ...props,
+      style: { minHeight: `calc(${rows} * ${mono ? 18 : 20}px + 18px)`, ...style },
+      className: cn(
+        controlBase,
+        "field-sizing-content max-h-60 resize-y px-3 py-2 leading-5",
+        mono && "font-mono text-xs leading-4.5 pointer-coarse:text-base",
+        className
+      )
+    }
+  );
+});
+var Checkbox = /* @__PURE__ */ forwardRef(function Checkbox2({ onCheckedChange, className, indeterminate = false, ...props }, forwardedRef) {
+  const inputRef = useRef(null);
+  const ref = useMergedRefs(inputRef, forwardedRef);
+  useLayoutEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs("span", { className: cn("relative grid size-4 shrink-0 place-items-center", className), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "checkbox",
+        ...props,
+        onChange: (event) => onCheckedChange?.(indeterminate ? true : event.target.checked),
+        className: "peer size-4 appearance-none rounded-[4px]! border border-border-strong bg-surface transition-colors duration-[120ms] checked:border-brand-strong checked:bg-brand-strong indeterminate:border-brand-strong indeterminate:bg-brand-strong hover:border-fg-subtle disabled:cursor-not-allowed pointer-coarse:after:absolute pointer-coarse:after:-inset-3.5 pointer-coarse:after:content-['']"
+      }
+    ),
+    indeterminate ? /* @__PURE__ */ jsx(
+      MinusIcon,
+      {
+        "aria-hidden": "true",
+        strokeWidth: 3,
+        className: "pointer-events-none absolute size-3 text-brand-fg"
+      }
+    ) : /* @__PURE__ */ jsx(
+      CheckIcon,
+      {
+        "aria-hidden": "true",
+        strokeWidth: 3,
+        className: "pointer-events-none absolute size-3 text-brand-fg opacity-0 peer-checked:opacity-100"
+      }
+    )
+  ] });
+});
+function CheckboxField({
+  label,
+  description,
+  disabledReason,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  disabled = false,
+  name,
+  className
+}) {
+  const id = useId();
+  const descriptionId = `${id}-description`;
+  const reason = disabled ? disabledReason : void 0;
+  const note = reason ?? description;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-disabled": disabled || void 0,
+      className: cn("flex min-w-0 items-start gap-3 pointer-coarse:py-1", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            id,
+            name,
+            checked,
+            defaultChecked,
+            disabled,
+            "aria-describedby": note ? descriptionId : void 0,
+            onCheckedChange,
+            className: cn("mt-0.5", disabled && "opacity-60")
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: id,
+              className: cn("block text-sm font-medium text-fg", disabled && "opacity-60"),
+              children: label
+            }
+          ),
+          note ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: descriptionId,
+              className: cn(
+                "mt-0.5 block text-xs leading-4.5 text-fg-muted",
+                disabled && !reason && "opacity-60"
+              ),
+              children: note
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  useField,
+  useFieldControlProps,
+  Field,
+  FieldStack,
+  TextInput,
+  TextArea,
+  Checkbox,
+  CheckboxField
+};
+//# sourceMappingURL=chunk-MVW6HNPI.js.map

package/dist/chunk-MVW6HNPI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/field.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useContext,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\nimport { CheckIcon, CircleAlertIcon, MinusIcon } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { useMergedRefs } from \"../lib/refs\";\nimport { useOpenGeniText } from \"../messages/runtime\";\nimport { ErrorText } from \"./error-text\";\n\n/* ----------------------------------------------------------------------------\n   Field - one labelled control in a vertical form (brief 7.15).\n\n   Label 14/500 bound to the control, an optional \"Optional\" marker, a 12px\n   hint, and an inline error that replaces the hint and sets aria-invalid on\n   the control. Controls inside a Field pick up their id, aria-describedby,\n   aria-invalid and aria-required from context, so a form never needs to wire\n   ids by hand.\n   -------------------------------------------------------------------------- */\n\ninterface FieldContextValue {\n  controlId: string;\n  labelId: string;\n  /** Ids of the visible hint or error, for aria-describedby. */\n  describedBy: string | undefined;\n  invalid: boolean;\n  required: boolean;\n  disabled: boolean;\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null);\n\n/** The enclosing Field, or null. Use it to label custom group controls. */\nexport function useField(): FieldContextValue | null {\n  return useContext(FieldContext);\n}\n\n/** Accessibility props for the control inside a Field. Explicit props win. */\nexport function useFieldControlProps(): {\n  id?: string | undefined;\n  \"aria-describedby\"?: string | undefined;\n  \"aria-invalid\"?: true | undefined;\n  \"aria-required\"?: true | undefined;\n  disabled?: true | undefined;\n} {\n  const field = useField();\n  if (!field) return {};\n  return {\n    id: field.controlId,\n    \"aria-describedby\": field.describedBy,\n    \"aria-invalid\": field.invalid ? true : undefined,\n    \"aria-required\": field.required ? true : undefined,\n    disabled: field.disabled ? true : undefined,\n  };\n}\n\nexport function Field({\n  label,\n  hint,\n  error,\n  optional = false,\n  required = false,\n  disabled = false,\n  aside,\n  group = false,\n  id,\n  className,\n  children,\n}: {\n  /** 14/500, sentence case, names what is being entered. */\n  label: ReactNode;\n  /** One 12px line under the control. Hidden while an error shows. */\n  hint?: ReactNode | undefined;\n  /** Inline error: what is wrong and how to fix it. Sets aria-invalid. */\n  error?: ReactNode | undefined;\n  /** Shows a quiet \"Optional\" marker after the label. */\n  optional?: boolean | undefined;\n  required?: boolean | undefined;\n  disabled?: boolean | undefined;\n  /** Right-aligned next to the label, for example a character count. */\n  aside?: ReactNode | undefined;\n  /**\n   * For controls that are a group (segmented control, radio cards): the label\n   * becomes the group's name through aria-labelledby instead of htmlFor.\n   */\n  group?: boolean | undefined;\n  /** Control id. Generated when omitted. */\n  id?: string | undefined;\n  className?: string | undefined;\n  children: ReactNode;\n}) {\n  const generatedId = useId();\n  const t = useOpenGeniText();\n  const controlId = id ?? `${generatedId}-control`;\n  const labelId = `${generatedId}-label`;\n  const hintId = `${generatedId}-hint`;\n  const errorId = `${generatedId}-error`;\n  const invalid = Boolean(error);\n  const showHint = Boolean(hint) && !invalid;\n  const describedBy = invalid ? errorId : showHint ? hintId : undefined;\n\n  const labelContent = (\n    <>\n      {label}\n      {optional ? (\n        <span className=\"ml-1.5 text-xs font-normal text-fg-subtle\">{t(\"field.optional\")}</span>\n      ) : null}\n    </>\n  );\n\n  const context = useMemo(\n    () => ({ controlId, labelId, describedBy, invalid, required, disabled }),\n    [controlId, labelId, describedBy, invalid, required, disabled],\n  );\n\n  return (\n    <FieldContext.Provider value={context}>\n      <div\n        role={group ? \"group\" : undefined}\n        aria-labelledby={group ? labelId : undefined}\n        aria-describedby={group ? describedBy : undefined}\n        data-invalid={invalid || undefined}\n        data-disabled={disabled || undefined}\n        className={cn(\"flex min-w-0 flex-col\", className)}\n      >\n        <div className=\"mb-2 flex min-w-0 items-baseline justify-between gap-3\">\n          {group ? (\n            <span id={labelId} className=\"min-w-0 text-sm font-medium text-fg\">\n              {labelContent}\n            </span>\n          ) : (\n            <label id={labelId} htmlFor={controlId} className=\"min-w-0 text-sm font-medium text-fg\">\n              {labelContent}\n            </label>\n          )}\n          {aside ? <div className=\"shrink-0 text-xs text-fg-subtle\">{aside}</div> : null}\n        </div>\n        {children}\n        {invalid ? (\n          <p\n            id={errorId}\n            className=\"mt-1.5 flex min-w-0 items-start gap-1.5 text-xs leading-4.5 text-danger\"\n          >\n            <CircleAlertIcon aria-hidden=\"true\" className=\"mt-0.5 size-3.5 shrink-0\" />\n            <span className=\"min-w-0 break-words\">\n              <ErrorText>{error}</ErrorText>\n            </span>\n          </p>\n        ) : showHint ? (\n          <p id={hintId} className=\"mt-1.5 min-w-0 text-xs leading-4.5 break-words text-fg-muted\">\n            {hint}\n          </p>\n        ) : null}\n      </div>\n    </FieldContext.Provider>\n  );\n}\n\n/** Vertical rhythm for a form: 24px between fields. */\nexport function FieldStack({ className, children }: { className?: string; children: ReactNode }) {\n  return <div className={cn(\"flex min-w-0 flex-col gap-6\", className)}>{children}</div>;\n}\n\n/* ----------------------------------------------------------------------------\n   Controls. Token styled; they read their Field for ids and aria.\n   `rounded-md!` keeps the 10px radius when the global focus outline applies.\n   -------------------------------------------------------------------------- */\n\nconst controlBase =\n  \"block w-full min-w-0 rounded-md! border border-border bg-surface text-sm text-fg transition-colors duration-[120ms] outline-offset-2 placeholder:text-fg-subtle hover:border-border-strong focus-visible:border-brand disabled:cursor-not-allowed disabled:border-border disabled:bg-surface-2 disabled:text-fg-muted read-only:bg-surface-2 read-only:hover:border-border aria-invalid:border-danger aria-invalid:hover:border-danger pointer-coarse:text-base\";\n\nexport const TextInput = /* @__PURE__ */ forwardRef<\n  HTMLInputElement,\n  ComponentPropsWithoutRef<\"input\"> & {\n    /** JetBrains Mono, for names, IDs and code. */\n    mono?: boolean | undefined;\n    /** Resource names are not a person's identity or a saved credential. */\n    suppressAutofill?: boolean | undefined;\n  }\n>(function TextInput(\n  { className, mono = false, suppressAutofill = false, type = \"text\", ...props },\n  ref,\n) {\n  const fieldProps = useFieldControlProps();\n  return (\n    <input\n      ref={ref}\n      type={type}\n      data-slot=\"text-input\"\n      {...fieldProps}\n      {...props}\n      {...(suppressAutofill\n        ? { autoComplete: \"off\", \"data-1p-ignore\": true, \"data-lpignore\": \"true\" }\n        : {})}\n      className={cn(\n        controlBase,\n        \"h-9 px-3 pointer-coarse:h-11\",\n        mono && \"font-mono text-xs pointer-coarse:text-base\",\n        className,\n      )}\n    />\n  );\n});\n\nexport const TextArea = /* @__PURE__ */ forwardRef<\n  HTMLTextAreaElement,\n  ComponentPropsWithoutRef<\"textarea\"> & {\n    mono?: boolean | undefined;\n  }\n>(function TextArea({ className, mono = false, rows = 3, style, ...props }, ref) {\n  const fieldProps = useFieldControlProps();\n  return (\n    <textarea\n      ref={ref}\n      rows={rows}\n      data-slot=\"text-area\"\n      {...fieldProps}\n      {...props}\n      // Grows with its content from `rows` lines (18px mono, 20px text) up to 240px.\n      style={{ minHeight: `calc(${rows} * ${mono ? 18 : 20}px + 18px)`, ...style }}\n      className={cn(\n        controlBase,\n        \"field-sizing-content max-h-60 resize-y px-3 py-2 leading-5\",\n        mono && \"font-mono text-xs leading-4.5 pointer-coarse:text-base\",\n        className,\n      )}\n    />\n  );\n});\n\n/**\n * The bare 16px checkbox, for rows that carry their own label (a model in\n * Allowed models). Wrap the row in a <label> so the whole row toggles it.\n * `indeterminate` shows a dash for a group checkbox whose items are mixed;\n * clicking it reports `checked: true` (select all).\n */\nexport const Checkbox = /* @__PURE__ */ forwardRef<\n  HTMLInputElement,\n  Omit<ComponentPropsWithoutRef<\"input\">, \"type\" | \"onChange\" | \"className\"> & {\n    onCheckedChange?: ((checked: boolean) => void) | undefined;\n    className?: string | undefined;\n    indeterminate?: boolean | undefined;\n  }\n>(function Checkbox({ onCheckedChange, className, indeterminate = false, ...props }, forwardedRef) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const ref = useMergedRefs(inputRef, forwardedRef);\n  useLayoutEffect(() => {\n    if (inputRef.current) inputRef.current.indeterminate = indeterminate;\n  }, [indeterminate]);\n  return (\n    <span className={cn(\"relative grid size-4 shrink-0 place-items-center\", className)}>\n      <input\n        ref={ref}\n        type=\"checkbox\"\n        {...props}\n        onChange={(event) => onCheckedChange?.(indeterminate ? true : event.target.checked)}\n        className=\"peer size-4 appearance-none rounded-[4px]! border border-border-strong bg-surface transition-colors duration-[120ms] checked:border-brand-strong checked:bg-brand-strong indeterminate:border-brand-strong indeterminate:bg-brand-strong hover:border-fg-subtle disabled:cursor-not-allowed pointer-coarse:after:absolute pointer-coarse:after:-inset-3.5 pointer-coarse:after:content-['']\"\n      />\n      {indeterminate ? (\n        <MinusIcon\n          aria-hidden=\"true\"\n          strokeWidth={3}\n          className=\"pointer-events-none absolute size-3 text-brand-fg\"\n        />\n      ) : (\n        <CheckIcon\n          aria-hidden=\"true\"\n          strokeWidth={3}\n          className=\"pointer-events-none absolute size-3 text-brand-fg opacity-0 peer-checked:opacity-100\"\n        />\n      )}\n    </span>\n  );\n});\n\n/**\n * A single yes/no choice inside a form with a Save button. For on/off that\n * saves immediately, use a switch instead.\n */\nexport function CheckboxField({\n  label,\n  description,\n  disabledReason,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  disabled = false,\n  name,\n  className,\n}: {\n  label: ReactNode;\n  /** One 12px line under the label. */\n  description?: ReactNode | undefined;\n  /** Why a disabled choice can't change: shown in the description's place, and stays legible. */\n  disabledReason?: ReactNode | undefined;\n  checked?: boolean | undefined;\n  defaultChecked?: boolean | undefined;\n  onCheckedChange?: ((checked: boolean) => void) | undefined;\n  disabled?: boolean | undefined;\n  name?: string | undefined;\n  className?: string | undefined;\n}) {\n  const id = useId();\n  const descriptionId = `${id}-description`;\n  // A disabled choice dims, all but the reason it is disabled.\n  const reason = disabled ? disabledReason : undefined;\n  const note = reason ?? description;\n  return (\n    <div\n      data-disabled={disabled || undefined}\n      className={cn(\"flex min-w-0 items-start gap-3 pointer-coarse:py-1\", className)}\n    >\n      <Checkbox\n        id={id}\n        name={name}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        aria-describedby={note ? descriptionId : undefined}\n        onCheckedChange={onCheckedChange}\n        className={cn(\"mt-0.5\", disabled && \"opacity-60\")}\n      />\n      <span className=\"min-w-0\">\n        <label\n          htmlFor={id}\n          className={cn(\"block text-sm font-medium text-fg\", disabled && \"opacity-60\")}\n        >\n          {label}\n        </label>\n        {note ? (\n          <span\n            id={descriptionId}\n            className={cn(\n              \"mt-0.5 block text-xs leading-4.5 text-fg-muted\",\n              disabled && !reason && \"opacity-60\",\n            )}\n          >\n            {note}\n          </span>\n        ) : null}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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","names":["TextInput","TextArea","Checkbox"]}

package/dist/chunk-N6AACDUW.js

@@ -0,0 +1,200 @@
+"use client";
+import {
+  SessionCapabilityFrame
+} from "./chunk-FO4LYKJL.js";
+import {
+  browserConnectWindowHost,
+  showsMcpServerLabel,
+  useMcpCapabilityConnect
+} from "./chunk-IMDQUHBJ.js";
+import {
+  useOpenGeniText
+} from "./chunk-7T2ZE3VT.js";
+
+// src/components/session-mcp-capability-card.tsx
+import { useEffect, useState } from "react";
+import { connectionAccountIdentityLabel } from "@opengeni/contracts/connection-account-label";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SessionMcpCapabilityCard(props) {
+  return /* @__PURE__ */ jsx(McpConnectionCard, { ...props });
+}
+function McpConnectionCard(props) {
+  const [client, setClient] = useState(props.client);
+  const [generation, setGeneration] = useState(0);
+  if (client !== props.client) {
+    setClient(props.client);
+    setGeneration(generation + 1);
+  }
+  return /* @__PURE__ */ jsx(
+    ScopedCard,
+    {
+      ...props
+    },
+    `${generation}:${props.workspaceId}:${props.sessionId}:${props.capabilityId}`
+  );
+}
+function ScopedCard({
+  client,
+  workspaceId,
+  sessionId,
+  capabilityId,
+  name,
+  rationale = "",
+  returnUrl,
+  onConfigured,
+  dialogOnly = false,
+  onClose,
+  personalOnly: configuredPersonalOnly = false,
+  connectLabel,
+  dialogSubtitle,
+  description: hostDescription,
+  logoSrc,
+  ownershipCopy
+}) {
+  const t = useOpenGeniText();
+  const [windows] = useState(() => browserConnectWindowHost(window));
+  const flow = useMcpCapabilityConnect({
+    client,
+    workspaceId,
+    sessionId,
+    capabilityId,
+    returnUrl,
+    windows,
+    onConfigured,
+    dialogOnly,
+    onClose,
+    personalOnly: configuredPersonalOnly
+  });
+  const { item, personalOnly, busy, waiting, reconciling, connected, ownership, offHere } = flow;
+  const useOwnLoginHere = offHere !== null && !connected && item !== null;
+  const ownLoginQuestion = useOwnLoginHere ? `${t("sessionMcpCapabilityCard.useYourLoginHereToo", {
+    account: connectionAccountIdentityLabel(
+      offHere.metadata,
+      t("sessionMcpCapabilityCard.yourNameAccount", { name: item.name })
+    )
+  })} ${t("sessionMcpCapabilityCard.useYourLoginHereScope")}` : null;
+  const [logo, setLogo] = useState(null);
+  useEffect(() => {
+    const path = item?.logoAssetPath;
+    setLogo(null);
+    if (!path?.startsWith("catalog-assets/")) return;
+    const abort = new AbortController();
+    let objectUrl = null;
+    void client.downloadCatalogAsset(path, { signal: abort.signal }).then((blob) => {
+      if (abort.signal.aborted || !blob.type.startsWith("image/") || blob.size > 2e6)
+        return;
+      objectUrl = URL.createObjectURL(blob);
+      setLogo(objectUrl);
+    }).catch(() => {
+    });
+    return () => {
+      abort.abort();
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [client, item?.logoAssetPath]);
+  return /* @__PURE__ */ jsx(
+    SessionCapabilityFrame,
+    {
+      name: item?.name ?? name,
+      subtitle: dialogSubtitle !== void 0 ? "" : item?.providerDomain ?? "",
+      logo: logo ?? logoSrc ?? null,
+      typeLabel: dialogSubtitle ?? (showsMcpServerLabel(item) ? t("sessionMcpCapabilityCard.mcpServer") : ""),
+      badge: showsMcpServerLabel(item) ? t("sessionMcpCapabilityCard.mcpServer") : void 0,
+      description: hostDescription || rationale || item?.description || "",
+      clampDescription: !hostDescription && Boolean(rationale),
+      skill: false,
+      expanded: flow.expanded,
+      complete: flow.complete,
+      actionLabel: useOwnLoginHere ? t("sessionMcpCapabilityCard.useItHere") : connected ? sessionId ? t("sessionMcpCapabilityCard.useInThisConversation") : t("sessionMcpCapabilityCard.connected") : t("sessionMcpCapabilityCard.connectName", { name: item?.name ?? name }),
+      note: ownLoginQuestion ?? (sessionId ? t("sessionMcpCapabilityCard.reviewAccessBeforeSigningIn") : t("sessionMcpCapabilityCard.reviewAccessBeforeSigningIn2")),
+      onOpen: useOwnLoginHere ? flow.useHere : flow.open,
+      opensDialog: !useOwnLoginHere,
+      busy: useOwnLoginHere && busy,
+      onClose: flow.close,
+      dialogOnly,
+      children: /* @__PURE__ */ jsxs("div", { className: "og-session-capability-setup", children: [
+        flow.error ? /* @__PURE__ */ jsx("p", { role: "alert", children: flow.error }) : null,
+        flow.notice ? /* @__PURE__ */ jsx("p", { role: "status", className: "og-session-capability-notice", children: flow.notice }) : null,
+        !item ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("p", { role: "status", children: busy ? t("sessionMcpCapabilityCard.loadingConnectionDetails") : t("sessionMcpCapabilityCard.connectionDetailsAreUnavailable") }),
+          /* @__PURE__ */ jsx("button", { disabled: busy, onClick: flow.open, children: t("sessionMcpCapabilityCard.retry") })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("p", { children: hostDescription || item.description || rationale }),
+          busy ? /* @__PURE__ */ jsxs("div", { className: "og-session-capability-waiting", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "og-session-capability-spinner" }),
+            /* @__PURE__ */ jsx("p", { role: "status", children: waiting ? t("sessionMcpCapabilityCard.finishSigningInWithName", { name: item.name }) : reconciling ? t("sessionMcpCapabilityCard.finishingYourConnection") : t("sessionMcpCapabilityCard.preparingYourConnection") }),
+            waiting ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "og-session-capability-stop",
+                onClick: flow.stopWaiting,
+                children: t("sessionMcpCapabilityCard.stopWaiting")
+              }
+            ) : null
+          ] }) : ownLoginQuestion ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { className: "og-session-capability-scope", children: ownLoginQuestion }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "og-session-capability-primary",
+                disabled: busy || flow.view.busy,
+                onClick: flow.useHere,
+                children: t("sessionMcpCapabilityCard.useItHere")
+              }
+            ),
+            /* @__PURE__ */ jsx("button", { type: "button", disabled: busy, onClick: flow.signIn, children: t("sessionMcpCapabilityCard.connectADifferentAccount") })
+          ] }) : !connected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            !item.connectionRef && !personalOnly ? /* @__PURE__ */ jsxs("fieldset", { disabled: busy, children: [
+              /* @__PURE__ */ jsx("legend", { children: ownershipCopy?.legend ?? t("sessionMcpCapabilityCard.whoCanUseThisConnection") }),
+              /* @__PURE__ */ jsxs("label", { children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    name: `${capabilityId}-ownership`,
+                    checked: ownership === "workspace",
+                    onChange: () => flow.setOwnership("workspace")
+                  }
+                ),
+                t("sessionMcpCapabilityCard.everyoneInThisWorkspace")
+              ] }),
+              /* @__PURE__ */ jsxs("label", { children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    name: `${capabilityId}-ownership`,
+                    checked: ownership === "personal",
+                    onChange: () => flow.setOwnership("personal")
+                  }
+                ),
+                t("sessionMcpCapabilityCard.onlyMe")
+              ] })
+            ] }) : null,
+            /* @__PURE__ */ jsx("p", { className: "og-session-capability-scope", children: personalOnly && ownership === "personal" ? t("sessionMcpCapabilityCard.connectsYourOwnAccountOnly") : ownershipCopy ? ownership === "workspace" ? ownershipCopy.workspace : ownershipCopy.personal : ownership === "workspace" ? sessionId ? t("sessionMcpCapabilityCard.thisConnectionWillBeAvailable") : t("sessionMcpCapabilityCard.thisConnectionWillBeAvailable2") : t("sessionMcpCapabilityCard.thisConnectionBelongsToYou") }),
+            /* @__PURE__ */ jsx("button", { className: "og-session-capability-primary", onClick: flow.signIn, children: flow.retrySignIn ? t("sessionMcpCapabilityCard.trySigningInAgain") : connectLabel ?? t("sessionMcpCapabilityCard.continueToName", { name: item.name }) })
+          ] }) : null,
+          connected && !busy ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { className: "og-session-capability-scope", children: sessionId ? t("sessionMcpCapabilityCard.yourAccountIsConnectedEnable") : t("sessionMcpCapabilityCard.yourAccountIsConnected") }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "og-session-capability-primary",
+                disabled: busy || flow.view.busy,
+                onClick: flow.addHere,
+                children: sessionId ? t("sessionMcpCapabilityCard.useInThisConversation") : t("sessionMcpCapabilityCard.done")
+              }
+            )
+          ] }) : null
+        ] })
+      ] })
+    }
+  );
+}
+
+export {
+  SessionMcpCapabilityCard,
+  McpConnectionCard
+};
+//# sourceMappingURL=chunk-N6AACDUW.js.map