import {  CardStack,  CardStackContent,  CardStackEntry,  CardStackEntryContent,  CardStackEntryDescription,  CardStackEntryField,  CardStackEntryTitle,} from "@executor-js/react/components/card-stack";import {  FreeformCombobox,  type FreeformComboboxOption,} from "@executor-js/react/components/combobox";import { Input } from "@executor-js/react/components/input";import { Textarea } from "@executor-js/react/components/textarea";import { IntegrationFavicon } from "@executor-js/react/components/integration-favicon";import {  IntegrationIdentityFieldRows,  type IntegrationIdentity,} from "@executor-js/react/plugins/integration-identity"; /** The spec input is shown as a one-line "Spec URL" field only when it IS a *  URL; pasted document content gets a multi-line editor instead. */const isUrlInput = (value: string): boolean => URL.canParse(value.trim()); export function OpenApiIntegrationDetailsFields(props: {  readonly title: string;  readonly subtitle?: string;  readonly identity: IntegrationIdentity;  /** The integration's agent-visible description (prefilled from the spec). */  readonly description?: string;  readonly onDescriptionChange?: (value: string) => void;  readonly baseUrl: string;  readonly onBaseUrlChange: (value: string) => void;  readonly baseUrlOptions?: readonly FreeformComboboxOption[];  readonly baseUrlLabel?: string;  readonly baseUrlPlaceholder?: string;  readonly baseUrlHint?: string;  readonly specUrl?: string;  readonly onSpecUrlChange?: (value: string) => void;  readonly faviconIcon?: string | null;  readonly faviconUrl?: string;  readonly namespaceReadOnly?: boolean;  readonly specUrlDisabled?: boolean;  readonly saveState?: "idle" | "saving" | "saved";  readonly baseUrlMissingMessage?: string;  readonly footer?: string;}) {  const specIsUrl = props.specUrl !== undefined && isUrlInput(props.specUrl);   return (    <CardStack>      <CardStackContent className="border-t-0">        <CardStackEntry>          {(props.faviconIcon || props.faviconUrl) && (            <IntegrationFavicon icon={props.faviconIcon} url={props.faviconUrl} size={16} />          )}          <CardStackEntryContent>            <CardStackEntryTitle>{props.title}</CardStackEntryTitle>            {props.subtitle && (              <CardStackEntryDescription>{props.subtitle}</CardStackEntryDescription>            )}          </CardStackEntryContent>          {props.saveState && props.saveState !== "idle" && (            <span className="text-xs text-muted-foreground">              {props.saveState === "saving" ? "Saving…" : "Saved"}            </span>          )}        </CardStackEntry>        <IntegrationIdentityFieldRows          identity={props.identity}          namespaceReadOnly={props.namespaceReadOnly}        />        {props.onDescriptionChange && (          <CardStackEntryField label="Description">            <Textarea              value={props.description ?? ""}              onChange={(e) => props.onDescriptionChange?.((e.target as HTMLTextAreaElement).value)}              placeholder="What this API is and when to reach for it"              rows={2}              maxRows={6}              className="text-sm"            />          </CardStackEntryField>        )}        <div className="grid grid-cols-1 md:grid-cols-2">          <CardStackEntryField label={props.baseUrlLabel ?? "Base URL"}>            {props.baseUrlOptions && props.baseUrlOptions.length > 0 ? (              <FreeformCombobox                value={props.baseUrl}                onValueChange={props.onBaseUrlChange}                options={props.baseUrlOptions}                placeholder={props.baseUrlPlaceholder ?? "https://api.example.com"}                className="w-full"                inputClassName="font-mono text-sm"              />            ) : (              <Input                value={props.baseUrl}                onChange={(e) => props.onBaseUrlChange((e.target as HTMLInputElement).value)}                placeholder={props.baseUrlPlaceholder ?? "https://api.example.com"}                className="font-mono text-sm"              />            )}             {props.baseUrlMissingMessage && !props.baseUrl && (              <p className="text-[11px] text-muted-foreground">{props.baseUrlMissingMessage}</p>            )}            {props.baseUrlHint && (              <p className="text-[11px] text-muted-foreground">{props.baseUrlHint}</p>            )}          </CardStackEntryField>          {specIsUrl && props.onSpecUrlChange && (            <CardStackEntryField label="Spec URL">              <Input                value={props.specUrl}                onChange={(e) => props.onSpecUrlChange?.((e.target as HTMLInputElement).value)}                placeholder="https://api.example.com/openapi.json"                className="font-mono text-sm"                disabled={props.specUrlDisabled}              />            </CardStackEntryField>          )}        </div>        {props.specUrl !== undefined && !specIsUrl && props.onSpecUrlChange && (          <CardStackEntryField label="Spec">            <Textarea              value={props.specUrl}              onChange={(e) => props.onSpecUrlChange?.((e.target as HTMLTextAreaElement).value)}              placeholder="Pasted OpenAPI JSON/YAML"              rows={4}              maxRows={12}              className="font-mono text-xs"              disabled={props.specUrlDisabled}            />          </CardStackEntryField>        )}        {props.footer && (          <CardStackEntry>            <CardStackEntryContent>              <CardStackEntryTitle>{props.footer}</CardStackEntryTitle>            </CardStackEntryContent>          </CardStackEntry>        )}      </CardStackContent>    </CardStack>  );}