import { PlusIcon, XIcon } from "lucide-react"; import { Button } from "@executor-js/react/components/button";import {  CardStack,  CardStackContent,  CardStackEntryField,} from "@executor-js/react/components/card-stack";import { FieldError } from "@executor-js/react/components/field";import { Input } from "@executor-js/react/components/input"; import { emptyHeaderRow, isValidHeaderName, type McpHeaderRow } from "./request-headers"; // ---------------------------------------------------------------------------// Request headers editor — the name/value pairs sent on every request to a// remote MCP server, including the connection check.//// Deliberately plain: two mono fields and a remove control per row, matching// the metadata voice the rest of the add flow uses. Rows are keyed by index// because the values are fully controlled, exactly as the shared placement// editor does it.// --------------------------------------------------------------------------- export function McpRequestHeadersEditor(props: {  readonly rows: readonly McpHeaderRow[];  readonly onChange: (rows: McpHeaderRow[]) => void;  /** Re-run the connection check with the headers as typed. */  readonly onTest?: () => void;  readonly testing?: boolean;}) {  const { rows, onChange } = props;   const set = (index: number, patch: Partial<McpHeaderRow>): void =>    onChange(rows.map((row, j) => (j === index ? { ...row, ...patch } : row)));   const remove = (index: number): void => onChange(rows.filter((_row, j) => j !== index));   const hasInvalidName = rows.some((row) => !isValidHeaderName(row.name));   return (    <CardStack>      <CardStackContent className="border-t-0">        <CardStackEntryField          label="Request headers"          description="- Optional. Sent on every request, including the connection check."        >          {rows.length > 0 && (            <div className="flex flex-col gap-2">              {rows.map((row, index) => (                <div key={index} className="flex items-center gap-2">                  <Input                    aria-label="Header name"                    value={row.name}                    onChange={(e) => set(index, { name: (e.target as HTMLInputElement).value })}                    placeholder="CF-Access-Client-Id"                    className="h-8 min-w-0 flex-1 font-mono text-xs"                    aria-invalid={isValidHeaderName(row.name) ? undefined : true}                  />                  <Input                    aria-label="Header value"                    value={row.value}                    onChange={(e) => set(index, { value: (e.target as HTMLInputElement).value })}                    placeholder="Value"                    className="h-8 min-w-0 flex-1 font-mono text-xs"                  />                  <Button                    type="button"                    variant="ghost"                    size="icon-sm"                    aria-label="Remove header"                    className="shrink-0 text-muted-foreground hover:text-foreground"                    onClick={() => remove(index)}                  >                    <XIcon />                  </Button>                </div>              ))}            </div>          )}           {hasInvalidName && (            <FieldError>A header name cannot contain spaces or a colon.</FieldError>          )}           <div className="flex flex-wrap items-center gap-2">            <Button              type="button"              variant="outline"              size="sm"              className="w-fit border-dashed"              onClick={() => onChange([...rows, emptyHeaderRow()])}            >              <PlusIcon />              Add header            </Button>            {props.onTest && rows.length > 0 && (              <Button                type="button"                variant="ghost"                size="sm"                onClick={props.onTest}                loading={props.testing}              >                Test connection              </Button>            )}          </div>           <p className="text-[11px] text-muted-foreground">            Stored with the integration and sent verbatim. Use these for endpoint-level access            tokens, such as a Cloudflare Access service token. A per-account credential belongs in            an auth method instead.          </p>        </CardStackEntryField>      </CardStackContent>    </CardStack>  );}